My goal is to align the text at the bottom of labels with a fixed height of 3em. This means that labels with one line of text should have the text aligned at the bottom, while labels with two lines should have the second line appear at the bottom.
In my layout, I have multiple columns in a Bootstrap row, each containing a label and a textarea. Some labels have longer text that spans two lines when the page width is reduced. To ensure consistency, I set all labels to a height of 3em. However, I now want the text in shorter labels to be aligned with the bottom row of longer labels, regardless of whether the longer labels occupy one or two rows.
Here's an example:
<div class="row bottom-row">
<div class="col-lg-3 col-md-6 textarea-div">
<label for="textArea1" class="titleLabel textareaLabel">Short</label>
<textarea id="textArea1"></textarea>
</div>
<div class="col-lg-3 col-md-6 textarea-div">
<label for="textArea2" class="titleLabel textareaLabel">Short</label>
<textarea id="textArea2"></textarea>
</div>
<div class="col-lg-3 col-md-6 textarea-div">
<label for="textArea3" class="titleLabel textareaLabel">A longer label</label>
<textarea id="textArea3"></textarea>
</div>
<div class="col-lg-3 col-md-6 textarea-div">
<label for="textArea4" class="titleLabel textareaLabel">A longer label</label>
<textarea id="textArea4"></textarea>
</div>
</div>