My issue involves rows with checkboxes and labels, some of which are longer than others. When the browser is resized or viewed on a mobile device, the columns containing longer labels collapse to a second row while shorter labels stay beside their checkboxes, resulting in an unsightly appearance.
Here's the HTML code structure:
<div class = "row">
<div class="col-lg-2">
<div class="input-group">
<input type="checkbox">
Small Label
</div>
</div>
<div class="col-lg-2">
<div class="input-group">
<input type="checkbox">
Big Label that collapses first
</div>
</div>
</div>
Is there a way to ensure that if one label collapses, the entire row collapses as well?
An ideal solution would involve a dynamic font that functions like an image, expanding and contracting to a maximum of 100% width without causing any collapsing issues. Using images for each label is not feasible due to the number of labels involved, posing a time-consuming task.