I am facing an issue where input elements in a row with labels above them are causing alignment problems when the screen width is reduced. The longer labels wrap to the next line and push the input element down, increasing the overall height of the row:
https://i.sstatic.net/o3P22.png
Although text wrapping is acceptable, I want the other inputs (with shorter labels) to remain aligned with the one that has shifted down.
Is there a way to resolve this without resorting to using ellipsis?
Below is the code snippet in question:
<div class="row">
<div class="col-md-4 form-group">
<div ><label>Short Label</label></div>
<div ><input class="form-control" ></div>
</div>
<div class="col-md-4 form-group">
<div ><label>This label is too long</label></div>
<div ><input class="form-control" ></div>
</div>
<div class="col-md-4 form-group">
<div ><label>Another label</label></div>
<div ><input class="form-control" ></div>
</div>
</div>