如何跨浏览器在 bootstrap 表单中并排对齐具有不同长度多行标签的表单输入？

Question

我的表单中有两个 div。他们可能有不同长度的标签。我希望将顶部的多行文本标签和相同的输入 div 彼此居中对齐。

可以在下面找到一个示例 jsfiddle：

<div class="container">
<div class="row">
    <div class="form-group col-md-6">
        <label for="first" class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </label>
        <input class="form-control" id="first">
    </div>
    <div class="form-group col-md-6">
        <label for="second" class="control-label">onsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et onseclit, sed do eiusmod tempor incididunt ut labore et </label>
        <input class="form-control" id="second">
    </div>
</div>

 .row {
    vertical-align: bottom;
}

.form-group .control-label{
    height:40px;
}

实际：文本标签顶部对齐，但输入框未居中对齐。

预期：文本标签顶部对齐，输入框居中对齐。

Answer 1

我已将 class inputdiv 添加到 div 的每个子项，并将该子项转换为 flexbox。

 .row {
    vertical-align: bottom;
}


.inputdiv{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 30vh;
}

我已将 min-height 属性设置为 30vh。随意使用此值。

<div class="container">
    <div class="row">
        <div class="form-group col-md-6 inputdiv">
            <label for="first" class="control-label">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </label>
            <input class="form-control" id="first">
        </div>
        <div class="form-group col-md-6 inputdiv">
            <label for="second" class="control-label">onsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et onseclit, sed do eiusmod tempor incididunt ut labore et </label>
            <input class="form-control" id="second">
        </div>
    </div>
</div>

如何跨浏览器在 bootstrap 表单中并排对齐具有不同长度多行标签的表单输入？

How to align form inputs with different length of multiline labels side to side in bootstrap forms across browsers?

css

angularjs

twitter-bootstrap-3