<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div> <div class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur eveniet debitis nesciunt ducimus ea asperiores nobis, porro doloribus quae, dolorem id quidem quisquam accusamus soluta ex sunt. Possimus, voluptatem rerum!</div> </div> <div> <div class="box">Box 2</div> </div> <div> <div class="box">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quam voluptatibus voluptate dolorum quis dolor iure reprehenderit animi quod ex, eum blanditiis, perferendis pariatur quaerat iusto nemo enim aliquid amet error! Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, iste eos! Modi, dolore enim placeat aliquam rerum itaque sint tempore excepturi unde debitis praesentium, eius, velit fugiat. Sequi, dolor iste.</div> </div> </div>

.container { display: flex; gap: 10px; } .box { border: 1px solid; width: 300px; }

function equalizekeyfactsHeights() { const keyfactsElements = document.querySelectorAll(".box"); // Reset the heights to 'auto' for recalculation keyfactsElements.forEach((keyfacts) => { keyfacts.style.height = "auto"; }); // Find the maximum height among all cardHeight elements let maxHeightkey = 0; keyfactsElements.forEach((cardHeight) => { maxHeightkey = Math.max(maxHeightkey, cardHeight.offsetHeight); }); // Apply the maximum height to all cardHeight elements keyfactsElements.forEach((keyfacts) => { keyfacts.style.height = `${maxHeightkey}px`; }); } // Run the function on page load and window resize window.addEventListener("load", equalizekeyfactsHeights); window.addEventListener("resize", equalizekeyfactsHeights);