ラベルが長いとフォーム内のフィールドの表示が変わる

Question

これらのフィールドを調整するためにあらゆる努力を払っています。

広い画面では「OK」と表示されますが、小さな画面ではラベルが長すぎて、フィールドの配置に影響します。

現在は次のようになります:

画面の幅が十分でない場合は、次のように表示する予定です。

これまでの私のコード:

.column-50、.column-100 {
   フロート: 左
}

.column-50 {
   幅: 50%
}
.marginbottom-4 {
   マージン-ボトム: 1.2em
}

<div class="column-100 marginbottom-4">
  <div class="column-50" style="padding: 0 0.2em">
    <div>
      <label>ここにラベルを付けます</label>
      <入力タイプ="テキスト">
    </div>
  </div>
  <div class="column-50" style="padding: 0 0.2em">
    <div>
      <label>長いラベルはここにあります</label>
      <入力タイプ="テキスト">
    </div>
  </div>
</div>

    

パディング、垂直方向の配置、コンテンツの配置をすでに試しましたが、もしかしたらやり方が間違っているのでしょうか?

Answer 1

解決策の 1 つはテーブルを使用することです

ここにラベルを付けます	長いラベルはここにあります