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 class="container">
<div class="row">
<div class="col-3">
<label for="dropDown">Field Label</label>
<select id="dropDown" name="dropDown" class="">
<option value=""></option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-3">
<label for="textBox1" class="required">Required Item - this is a sample of a longer title</label>
<input type="text" id="textBox1" name="textBox1" class="" />
<span id="termsError" class="error-box">Error</span>
</div>
<div class="col-3">
<label for="textBox3">Numeric Input (disabled)</label>
<input type="number" id="textBox3" name="textBox3" value="44.34" disabled="disabled" class="align-right">
<span id="termsError" class="warning-box">Warning</span>
</div>
<div class="col-3">
<label for="textBox4">Date Picker</label>
<input type="date" id="textBox4" name="textBox4" class="" />
<span id="termsError" class="info-box">Info</span>
</div>
</div>
</div>
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);
});