In my attempt to create three blocks with set height and width, aligned on top/bottom with a couple of elements inside each one, I encountered an issue. Whenever I add additional DIVs to one of the elements (resulting in a different number of DIVs inside each block), it causes that element to display one line lower than the rest. Below is an example of the code:
<div class="container">
<div class="d-inline-block border border-primary" style="width:16%;height:15vh;">
<div>thing1</div>
<div>XXX</div>
</div>
<div class="d-inline-block border border-success" style="width:16%;height:15vh;">
<div>thing2</div>
</div>
<div class="d-inline-block border border-primary" style="width:16%;height:15vh;">
<div>thing3</div>
<div>XXX</div>
</div>
</div>
Using Bootstrap 5.0, the above code renders with the "thing2" box not aligning properly with the others, being pushed lower.
Do you have any suggestions for resolving this issue?
I've experimented with wrapping elements in additional divs to set max height, as well as tried using position-relative/absolute properties, but I still can't comprehend the effect of one box on another.