I'm facing an issue with alignment in my form using Bootstrap 4.4. Whenever a select element is included, it disrupts the layout by breaking the alignment of labels and inputs on the same row.
Is there a way to always keep the labels at the top and the input elements at the bottom without resorting to custom CSS or additional HTML elements?
<div class="row col-sm-12 col-md-12 col-lg-12">
<div class="col-sm-12 col-md-3 col-lg-3 form-group">
<label for="value">Value:</label>
<select>
<option>something</option>
</select>
<div class="input-group">
<input type="text" class="form-control">
</div>
</div>
<div class="col-sm-12 col-md-3 col-lg-3 form-group">
<label for="name">Name:</label>
<div class="input-group">
<input type="text" class="form-control">
</div>
</div>
</div>
https://i.sstatic.net/xcKDY.png
After trying to use justify on one of the containers to align all inputs at the bottom, I realize that I still prefer having labels at the top.
Edit: The desired layout consists of multiple form groups on a single row: https://i.sstatic.net/uzoxC.png