0

.wrapper {
   display: flex;
   flex-flow: wrap;
   justify-content: center;
}

.item {
   max-width: 300px;
   border: 1px solid black;
   padding: 10px;
   margin: 10px;
}
<div class="wrapper">
   <div class="item">
      <h1>asldkfjöalsd faöslkf asölkfd aöslkdf aöls fjöalksdjf öalksfj ö</h1>
      <div style="background: red; height: 80px;"></div>
   </div>
   <div class="item">
      <h1>ösldfjalödk ösld</h1>
      <div style="background: red; height: 80px;"></div>
   </div>
</div>

As you can see in this example the h1 should represent an title of an card. My problem is when i write an title that is too long so it needs an line break, the height of the titles arent equal. The red box should be at the same height like the other in one row.

The height of the title should be as height as of the heighest title in a row.

Is this possible to achive dynamically?

bill.gates
  • 14,145
  • 3
  • 19
  • 47
  • you want the red to always be at the bottom? – Temani Afif Oct 07 '20 at 19:38
  • @TemaniAfif actually i have an box with 3 elements in it, the title, the red box should represent an image, and under the image there is an description. the title should be on the same height, image too and the description just should be pushed down to the bottom – bill.gates Oct 07 '20 at 19:38

0 Answers0