I have experimented with various combinations of Bootstrap 4's flexbox align utilities, as outlined in their documentation, but to no avail.
Is there a way to ensure that the second <select> in the form below is aligned at the bottom of the row?
<div class="container mt-5"> <div class="row"> <div class="col-md-6"> <label for="validationCustom01">Choose one. With this lengthy label causing a line break, the select element appears lower down.</label> <select class="form-control" id="validationCustom01"> <option value="1">Option 1</option> <option value="2">Option 2</option> </select> </div> <div class="col-md-6"> <label for="validationCustom02">Choose one</label> <select class="form-control" id="validationCustom02"> <option value="1">Option 1</option> <option value="2">Option 2</option> </select> </div> </div; </div;>; <p><a href="https://i.sstatic.net/QWwu1.png" rel="nofollow noreferrer"></a></p> <p>Note that due to the extensive label on the first element, the dropdowns are not aligned. This issue stems from responsive behavior, so adjusting height or width is not an ideal solution. The objective is to horizontally align both <code><select>elements at all screen sizes.Check out a Codepen example here: https://codepen.io/cpj22/pen/eYOZPLQ