For example I would like the "reviews" row to be in the same position on each li no matter what size the heading tag is
Unfortunately using min-height on the heading isn't an option as it can vary a fair bit in size for each one
Is this possible to do with grid or something similar?
https://jsfiddle.net/t8bzusgk/16/
ul { display: flex; gap: 20px; list-style: none; padding: 0;}li { display: flex; flex-direction: column; height: auto; background-color: #f1f1f1; border: 1px solid black; width: 100%; padding: 20px;}.content { display: grid; grid-template-rows: auto auto auto auto; /* 4 rows for: title, reviews, price, discount */ gap: 0.5rem; height: 100%;}.price { grid-row: 3; background-color: cornflowerblue; color: white;}.reviews { background-color: tomato;}h2 { margin: 0; background-color: goldenrod;}<ul><li><div class="content"><h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse minima eum possimus eius aperiam deleniti aspernatur eligendi illum repellendus sed.</h2><div class="reviews">Reviews</div><div class="price">$10.99</div><div class="discount">10% off today!</div></div></li><li><div class="content"><h2>Lorem ipsum</h2><div class="reviews">Reviews</div><div class="price">$10.99</div><!-- Empty discount row --></div></li><li><div class="content"><h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse minima eum po.</h2><div class="reviews">Reviews</div><div class="price">$10.99</div><div class="discount">10% off today!</div></div></li></ul>