Long labels cause the display of fields in the form to change

Question

I'm making every effort to adjust these fields.

On wider screens, it displays OK, but on smaller screens, the labels become too long, affecting the alignment of the fields.

Currently it looks like this:

If the screen is not wide enough, I plan to have them display like this:

My code so far:

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

    

Already tried using padding, vertical alignment, aligning content, but maybe I'm doing it wrong?

Answer 1

One solution might be to use tables

  

    
LABEL HERE
    
LONG LABEL GOES HERE