统一和对齐Flex容器中多个div内的元素

Question

我有一些卡片位于Flex容器内，这些卡片包含一些元素。它目前看起来像这样：

有时，卡片中的标题需要两行而其他标题不会，这会导致其他卡片空白：

我想要的是将每个元素与所有卡片中相应的元素对齐，因此第一个标题应始终高于第一个＆＃34;绘制＆＃34; line，绘制线之间的第二条头线和第二条绘制线下方的元数据。

该卡具有以下结构：

<a class="card" href=#>
    <img src=# />
    <h5>First Headline</h5>
    <h4>Second Headline</h4>
    <div class="post-meta">
    ...
    </div>
</a>

卡有css：

margin: 15px 10px;
flex-grow: 1;
text-align: center;
flex-basis: 250px;
display: inline-block;

卡片容器有css：

padding:4%;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
align-items: stretch;

我尝试了几件事。我尝试使用bottom: 0;将post meta相对定位到卡的底部，但它与上面的元素重叠。尝试使用另一个Flex容器，如Answer所述，但我似乎无法弄清楚如何在嵌套div中应用它。

我正在寻找的顶级解决方案是将标题的高度设置为最大高度。任何帮助将不胜感激。