Html 如何使输入字段排列在标签的中间？

下面是我面临的问题的一个例子：

这是我的HTML：

<div>
  <div class="component">
    <div>
      <label for="test1" id="short-label">Short label: </label>
    </div>
    <div>
      <input type="text" id="test1" />
    </div>
  </div>
  <div class="component">
    <div>
      <label for="test2" id="long-label">This is my very very very very very very very very very very very very very very very very very very long label: </label>
    </div>
    <div>
      <input type="text" id="test2" />
    </div>
  </div>
</div>

这将导致输入字段排列在标签的右侧。这就是我想要的，但是，它在一个非常长的标签的行的末尾

我真正想要的是输入字段行位于标签的右侧和相对中间

因此，在上面的JS Fiddle示例中，我希望输入字段排列在长标签第三行的右侧

---

我一直在玩弄边距、填充物、线条高度等，但我还没有找到正确的解决方案

您可以使用

Flexbox

并在

组件上设置
对齐项目：居中


.component{
显示器：flex；
对齐项目：居中；
}
.component>div：第一个子项{
宽度：150px；
文本对齐：右对齐；
}

短标签：
这是我非常非常非常非常长的标签：
您可以使用
Flexbox
并在
上设置
对齐项目：居中


.component{
显示器：flex；
对齐项目：居中；
}
.component>div：第一个子项{
宽度：150px；
文本对齐：右对齐；
}

短标签：
这是我非常非常非常非常长的标签：
只要一行CSS就可以了

.component > div {
  display: inline-block;
  vertical-align: middle;
}  

请记住，这是双向的-因此，如果您的输入比标签高，标签将以输入为中心。
只要一行CSS就可以了

.component > div {
  display: inline-block;
  vertical-align: middle;
}  

请记住，这是双向的-因此，如果您的输入高于标签，标签将以输入为中心