長標籤會導致表單中欄位的顯示發生變化

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