CSS - Issue maintaining labels and inputs on separate lines - html

Question

I'm trying to figure out how I can get labels in my form to be maintained all on one line. That is if a label for a specific input happens to be longer than the rest, I would like the other labels to have additional white space underneath such that my input fields are in alignment. See picture for alignment issue.
<div class="row">
<div class="form-group col-xs-12 col-sm-3 col-md-3 col-lg-3">
<label>Window Utilization Total:<span class="input-required" ng-show="logbook.util.$error.required">*</span></label>
<input name="util" ng-model="sortie.total_window_time" empty-to-null required type="text" title="Time: e.g. 01:00, 12:30, 23:59, etc" maxlength="5"
placeholder="00:00" pattern="^([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$"/>
<p class="input-error" ng-show="logbook.util.$invalid && logbook.util.$touched">
Invalid time (e.g. 12:00, 23:59, 1:30, etc).
</p>
</div>
<div class="form-group col-xs-12 col-sm-3 col-md-3 col-lg-3">
<label>Flight Plan:</label>
<input ng-model="sortie.flight_plans" empty-to-null type="text" placeholder="e.g. NMZSAN_FP509"/>
</div>
<div class="form-group col-xs-12 col-sm-3 col-md-3 col-lg-3">
<label>Partial Flight Plans (Lines Completed):</label>
<input ng-model="sortie.partial_flight_plan" empty-to-null type="text" placeholder="e.g. NMZSAN_FP509, Lines 1-5"/>
</div>
<div class="form-group col-xs-12 col-sm-3 col-md-3 col-lg-3">
<label>Date of Last Control:</label>
<input ng-model="sortie.last_control_date" empty-to-null type="text" placeholder="YYYY-MM-DD"/>
</div>
</div>

Answer 1

If you want an all-css approach, it's going to be tricky. Someday, grid layout will make this sort of thing easy, but it has terrible support right now.
However, you could use flex-box to help you.
I think it will work if you have two rows, one for labels and one for the inputs.
<style>
div { display: flex }
label, input { flex: 1 }
</style>
<div>
<label for="1">Short</label>
<label for="2">Also Short</label>
<label for="3">So long ohmygoodness so much to say</label>
</div>
<div>
<input id="1"/>
<input id="2"/>
<input id="3"/>
</div>
Here's a jsfiddle to demonstrate it.
Note that flexbox support is not yet perfect, and you should add some browser-specific prefixes and be aware of its limitations. Read more at caniuse.com. If you need support for older versions of IE, it looks like you'll have to use a javascript fallback as indicated in the other answer here.

Answer 2

Just add this js code in your file, what this will do, it will equalize all the label height based on the height of biggest label as per its content/text.
Add class label_big to all the label elements
This works for me very well, hope it will resolve your issue.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
var highestBox = 0;
$('.form_group .label_big').each(function(){
if($(this).height() > highestBox){
highestBox = $(this).height();
}
});
$('.form_group .label_big').height(highestBox);
});
</script>