Label panjang menyebabkan paparan medan dalam bentuk berubah

Question

Saya berusaha sedaya upaya untuk menyesuaikan bidang ini.

Pada skrin yang lebih luas, ia memaparkan OK, tetapi pada skrin yang lebih kecil, label menjadi terlalu panjang, menjejaskan penjajaran medan.

Pada masa ini ia kelihatan seperti ini:

Jika skrin tidak cukup lebar, saya bercadang untuk memaparkannya seperti ini:

Kod saya setakat ini:

.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>

    

Sudah cuba menggunakan padding, penjajaran menegak, penjajaran kandungan, tetapi mungkin saya salah melakukannya?

Answer 1

Satu penyelesaian mungkin menggunakan meja

LABEL HERE	LONG LABEL GOES HERE