Les étiquettes longues entraînent une modification de l'affichage des champs dans le formulaire

Question

Je mets tout en œuvre pour ajuster ces champs.

Sur les écrans plus larges, il affiche OK, mais sur les écrans plus petits, les étiquettes deviennent trop longues, affectant l'alignement des champs.

Actuellement, cela ressemble à ceci :

Si l'écran n'est pas assez large, je prévois de les afficher comme ceci :

Mon code jusqu'à présent :

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

    

J'ai déjà essayé d'utiliser le remplissage, l'alignement vertical, l'alignement du contenu, mais peut-être que je me trompe ?

Answer 1

Une solution pourrait être d'utiliser une table

  

    
LABEL HERE
    
LONG LABEL GOES HERE