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

Question

我的表格中有两个div。它们的标签长度​​可能不同。我希望同时对齐多行文本标签和相同的输入div，使其彼此居中对齐。

示例jsfiddle可以在下面找到：

http://jsfiddle.net/ahujamoh/0v2fj4mc/

<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

我已将类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>