Make form labels inside columns the same height in the same row-CodePudding

I am trying to style a form that uses bootstrap rows and columns. I want the labels above the form input to all be the same height so the inputs line up regardless how many lines the label is. The reason I dont just align the content of each column to the bottom is because sometimes there will be a message underneath the input. I know how to make all of the columns the same height within a row, but is there a way to make an element inside of that column the same height as matching elements in other columns? I cannot put the labels on their own row, otherwise the forms would not be responsive.

Here is an example of what I'm working with

<div >
  <div >
    <div >
      <label for="dropDown">Field Label</label>
      <select id="dropDown" name="dropDown" >
        <option value=""></option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div >
      <label for="textBox1" >Required Item - this is a sample of a longer title</label>
      <input type="text" id="textBox1" name="textBox1"  />
      <span id="termsError" >Error</span>
    </div>
    <div >
      <label for="textBox3">Numeric Input (disabled)</label>
      <input type="number" id="textBox3" name="textBox3" value="44.34" disabled="disabled" >
      <span id="termsError" >Warning</span>
     </div>
    <div >
      <label for="textBox4">Date Picker</label>
      <input type="date" id="textBox4" name="textBox4"  />
      <span id="termsError" >Info</span>
    </div>
  </div> 
</div>

https://jsfiddle.net/bendorf_07/8nda4ujk/3/

CodePudding user response：

You can achieve this with add height on labels by using javascript. Find the biggest height of the labels and make them all at the same height like the largest.

$(window).on("load resize",function(){
    $('label').height(''); //Remove height first on resizing
    var heights = $("label").map(function() {
            return $(this).height();
        }).get();
        
    maxHeight = Math.max.apply(null, heights);
        
    $("label").css("height", maxHeight);
});

https://jsfiddle.net/2qce68yv/