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 ?