When placing two input fields in a row, such as a drop down menu, with labels of varying lengths, the alignment of the inputs can become skewed. This issue persists even when attempting to add breaks in the code due to unpredictable wrapping behavior at different screen widths.
With approximately 100 elements in the form, displaying each element on a single line would result in an excessively long form.
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label>Question 1?</label>
<select size="0" class="form-control" name="typeOfEntity">
<option disabled selected>Select One...</option>
<option>Answer 1</option>
<option>Answer 2</option>
</select>
</div>
<div class="form-group col-md-6">
<label>This is a really lengthy question 2 that requires an answer?</label>
<select size="0" class="form-control" name="whyRegistering">
<option disabled selected>Select One...</option>
<option>Answer 1</option>
<option>Answer 2,3,4,5 etc</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
To observe the alignment issue, refer to this jsfiddle: https://jsfiddle.net/30mfgLde/