在Flexbox中平均分配内容

Question

我有一系列基本遵循以下格式的弹性框（在网格上-可能是我对此工程过度了）：

图标 卡名 说明

我试图根据卡标题的长短来防止描述上下移动。换句话说，我希望描述文字在卡片行中均匀地开始。根据我的阅读，可以通过使用justify-content属性来实现此目的，但是我不确定如何实现。

有什么想法吗？

.resource-cards {
    width: 100%;
    max-width: 1240px;
    margin: 0;

    display: grid;

    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-gap: 20px;

}

@media only screen and (min-width: 850px) {
    .resource-cards {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.card {
    background: white;
    text-decoration: none;
    color: #444;
    border: 1px solid dimgrey;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    position: relative;
    top: 0;
    transition: all .1s ease-in;
}

.card:hover {
    top: -2px;
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2)
}

.card .thumbnail {
    margin: 5% 1% 0 5%;
}

.card article {
    padding: 20px;
    flex: 1;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card h1 {
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    color: #333;
    line-height: 120%;
}

.card p {
    line-height: 1.4;
    flex: 1;
    font-size: 1rem;
}

<div class="resource-cards">
    <div class="resource">
        <a href="" class="card" target="_blank">
            <div class="thumbnail">
                <img src="">
                <h1>Title</h1>
            </div>
            <article>
                <p>Lorem ipsum dolor amet single-origin coffee jean shorts                          church-key occupy, chia woke narwhal hoodie. Austin hashtag                      schlitz vaporware chartreuse raclette, tattooed air plant.                      Flexitarian copper mug slow-carb, jean shorts 8-bit ramps                        yuccie bespoke.
                </p>
            </article>
        </a>
    </div>
</div>