I have some cards that lie inside a flex container, those cards include some elements. It currently looks like this:
Sometimes the headline in a card takes two lines and the other headlines don't, which causes an empty space at the other cards:
What I want is to align each element with its corresponding one in all cards, so the first headline should always be above the first "drawn" line, the second head line in between the drawn lines and the meta data below the second drawn line.
The card has structure:
<a class="card" href=#>
<img src=# />
<h5>First Headline</h5>
<h4>Second Headline</h4>
<div class="post-meta">
...
</div>
</a>
Card has css:
margin: 15px 10px;
flex-grow: 1;
text-align: center;
flex-basis: 250px;
display: inline-block;
Card container has css:
padding:4%;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
align-items: stretch;
I tried couple of things. I tried relative positioning the post meta to the bottom of the card using bottom: 0; but it overlapped with the above element. Tried using another flex container as described in this Answer but I can't seem to figure out how to apply it in nested divs.
The top solution I am looking for is to set the height of the headlines to the maximum height. Any help would be appreciated.
