I have two Bootstrap columns with cards in them. I want the cards inside the columns to grow or increase in height equally based on the content inside. In my case, I want 'card-one' and 'card-three' to share equal heights, and 'card-two' and 'card-four' to share equal heights. I've tried the above, but I can't control 'card-one' and 'card-three' to share equal heights as they are in different columns."
Here's the corrected codepen
//document.getElementsByTagName("h1")[0].style.fontSize = "6vw";body { font-family: system-ui; background: #f06d06; color: white; text-align: center;}.one { background: black; color: white;}.two { background: blue; color: white;}.three { background: green; color: white;}.four { background: red; color: white;}<div class="flex-container align-items-stretch"><div class="card w-100 h-100"><div class="card-body w-100 h-100 d-flex flex-column"><div class="row align-items-stretch flex-grow-1"><div class="col-md-6"><div class="card w-100 h-100"><div class="card-header w-100"> header</div><div class="card-body w-100 mt-4"><div class="card border w-100 shadow card-one"><div class="card-body w-100"><label class="one">1</label> Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, id cupiditate repudiandae ab exercitationem nesciunt? Provident, voluptatum! Distinctio atque exercitationem pariatur voluptatum fuga dolorem, earum dolores tenetur eveniet placeat dolore!</div></div><div class="card border w-100 shadow mt-4 card-two"><div class="card-body w-100"><label class="two">2</label> Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, id cupiditate repudiandae ab exercitationem nesciunt? Provident, voluptatum! Distinctio atque exercitationem pariatur voluptatum fuga dolorem, earum dolores tenetur eveniet placeat dolore!</div></div></div></div></div><div class="col-md-6"><div class="card w-100 h-100"><div class="card-header w-100"> header</div><div class="card-body w-100 mt-4"><div class="card border w-100 shadow card-three"><div class="card-body w-100"><label class="three">3</label> Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, id cupiditate repudiandae ab exercitationem nesciunt? Provident, voluptatum! Distinctio atque exercitationem pariatur voluptatum fuga dolorem, earum dolores tenetur eveniet placeat dolore!</div></div><div class="card border w-100 shadow mt-4 card-four"><div class="card-body w-100"><label class="four">4</label> Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia, id cupiditate repudiandae ab exercitationem nesciunt? Provident, voluptatum! Distinctio atque exercitationem pariatur voluptatum fuga dolorem, earum dolores tenetur eveniet placeat dolore!</div></div></div></div></div></div></div></div></div><!-- Latest compiled and minified CSS --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"><!-- jQuery library --><script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script><!-- Popper JS --><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script><!-- Latest compiled JavaScript --><script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>