I'm using Boostrap 5 and I have four boxes that are not cards. How can I ensure they are the same height, considering the dynamic content?
You can access the Codepen for more information: https://codepen.io/Deluxe23/pen/gOXJWwG
Below is an excerpt of the HTML code featuring just two boxes, as posting the entire code here would be excessive. You'll see all four boxes in the Codepen sample.
.box>.icon {
// CSS styles here
}
// More CSS styles for the boxes...
.box .space {
height: 30px;
}// HTML markup for the first box
<div class="col-6 col-sm-6 col-lg-3">
<div class="box ">
<!-- Box content here -->
</div>
</div>
// HTML markup for the second box
<div class="col-6 col-sm-6 col-lg-3">
<div class="box ">
<!-- Second box content here -->
</div>
</div>