垂直对齐同一高度列的页脚

Question

我有多个相同高度的栏。它们具有不同大小的标题<h3>和内容<p>。尽管如此，标题和内容都在顶部垂直对齐（y位置相同）。

.title-three {
  font-size: 56px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-6 col-lg-4 d-flex flex-column my-2 my-lg-3 px-2 px-lg-3">
      <div class=" card  p-3  h-100 align-top" style="background: #F8F8F8">
        <h3 class="title-three flex-grow-1 mb-3">Java, Kotlin. Swift & C  </h3>
        <p class="">
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatibus assumenda corrupti enim laudantium illum! Commodi, sunt minus vero excepturi tempora optio voluptate saepe illum est numquam ut, assumenda ad necessitatibus.
        </p>
      </div>
    </div>
    <div class="col-6 col-lg-4  d-flex flex-column my-2 my-lg-3 px-2 px-lg-3" id="bankintegrasjoner" >
      <div class="d-flex flex-column justify-content-between card  p-3 h-100" style="background: #FDF0D3">
        <h3 class="title-three flex-grow-1 mb-3">Javascript </h3>
        <p class="">
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi consequatur sunt fugit, molestiae recusandae nihil, atque esse hic pariatur suscipit dolor, aut ratione illum illo reiciendis laudantium commodi iste non?
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod hic vitae porro! Nesciunt nemo sapiente deleniti excepturi quibusdam distinctio, officia architecto fugiat cupiditate sunt labore dignissimos velit, laborum vitae quas!
        </p>
      </div>
    </div>
    <div class="col-6 col-lg-4 d-flex flex-column my-2 my-lg-3 px-2 px-lg-3">
      <div class="card  p-3  h-100" style="background: #E9E2F5">
        <h3 class="title-three mb-3">HTML &  CSS</h3>
        <p class="">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        </p>
      </div>
    </div>
  </div>
</div>

如何在不使用固定高度的情况下对齐它们？