长标签会导致表单中字段的显示发生变化

Question

我正在尽一切努力来调整这些字段。

在较宽的屏幕上，它的显示还可以，但在较小的屏幕上，标签会变得太长，影响字段的对齐。

目前看起来像这样：

如果屏幕不够宽，我计划让它们像这样显示：

到目前为止我的代码：

.column-50, .column-100 {
   float: left
}

.column-50 {
   width: 50%
}
.marginbottom-4 {
   margin-bottom: 1.2em
}

<div class="column-100 marginbottom-4">
  <div class="column-50" style="padding: 0 0.2em">
    <div>
      <label>LABEL HERE</label>
      <input type="text">
    </div>
  </div>
  <div class="column-50" style="padding: 0 0.2em">
    <div>
      <label>LONG LABEL GOES HERE</label>
      <input type="text">
    </div>
  </div>
</div>

    

已经尝试过使用填充、垂直对齐、对齐内容，但也许我做错了？

Answer 1

一种解决方案可能是使用表格

  

    
LABEL HERE
    
LONG LABEL GOES HERE