仅限CSS/引导的统一文本字段

我希望有人能帮我。我试图创建以下示例：

这些是（三）个文本框。例如：

我试着把文本框放在一个div的边上，使它的宽度很低，并在旁边对齐第二个文本框。我设置边界：无，然后 右边框：纯黑1px，但在引导过程中，我最终得到如下结果：

---

发布我自己问题的答案，将来可能对其他人有用

Iv使用了以下HTML：

<div class="addressMain">
    <div class="addressBorder">
        <div class="addressUnified">
            <input type="text" placeholder="No." class="small" ></input>
            <input type="text" placeholder="Address Details..." class="med"></input>
            <br>
            <input type="text" placeholder="" class="big"></input>
            <br>
            <input type="text" placeholder="" class="big"></input>
        </div>
    </div>

结果完全符合我在原始问题中的要求。谢谢约翰的帮助

---

注意，使用以下命令覆盖任何引导css！重要的

我想你应该去掉文本框的所有边框，然后把它们放在一个有完整边框的div中。是的，这就是我最初尝试的。删除所有边框并为小文本框设置右侧边框。我不是这么说的。文本框没有边框。分区的全边框。我需要第一个和第二个文本框之间的线条，有什么建议吗？可能是一个内部分区，甚至是一个图形图像。它可能对你有用。我只是觉得您可能无法仅显示文本框的一些边框。

.addressUnified .med{
    width: 80%;
    border: none;
    border-left: solid grey 1px;
    padding-left: 15px;
    outline: none
}

.addressUnified .big{
    width: 100%;
    border:none;
    padding-top: 5px;
    padding-left: 10px;
    outline: none
}

.addressUnified .small{
    width:10%;
    border:none;
    padding-left: 10px;
    padding-top: 10px;
    outline: none
}

.addressUnified{
    width: 100%;
    height:100px;
    border: solid grey 1px;
}