Lange Beschriftungen führen dazu, dass sich die Anzeige von Feldern im Formular ändert

Question

Ich bemühe mich, diese Felder anzupassen.

Auf breiteren Bildschirmen wird alles in Ordnung angezeigt, aber auf kleineren Bildschirmen werden die Beschriftungen zu lang, was sich auf die Ausrichtung der Felder auswirkt.

Derzeit sieht es so aus:

Wenn der Bildschirm nicht breit genug ist, plane ich, sie so anzuzeigen:

Mein Code bisher:

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

    

Haben Sie bereits versucht, Auffüllung, vertikale Ausrichtung und die Ausrichtung von Inhalten zu verwenden, aber vielleicht mache ich es falsch?

Answer 1

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

  

    
LABEL HERE
    
LONG LABEL GOES HERE