カード型の中身が増減してもボタンの位置を揃えたい

やりたいこと

WordPressでよく出てくるカード型の一覧画面。
投稿する内容によって高さが変わったりしても、ボタンの位置や高さが揃うようにしたい

良くない例

<!-- ulは端折る -->

<li class="bl_card">
<a href="">

<figure class="bl_card_imgWrapper"></figure>

<div class="bl_card_body">
<h2 class="bl_card_ttl">タイトルが入ります。</h2>
<p class="bl_card_txt">
本文が入ります。本文が入ります。<br>
本文が入ります。本文が入ります。<br>
本文が入ります。本文が入ります。
</p>
<p class="el_btn">詳細はこちら</p>
</div>
<!-- /.bl_card_body -->

</a>
</li>

.bl_card {
  width: 320px;
  min-height: 420px;
}
.bl_card > a {
  display: block;
  height: 100%;
}
.bl_card_imgWrapper {
  width: 100%;
  height: 240px;
  background: #999;
}
.bl_card_body {
  padding: 20px;
  background: #fff;
}
.bl_card_ttl {
  margin-bottom: 16px;
}
.el_btn {
  width: 200px;
  height: 46px;
  background: #999;
  font-size: 20px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px auto 0;
}

修正後

HTMLは同じなので、CSSだけ変更

.bl_card {
  width: 320px;
  min-height: 420px;
}
.bl_card > a {
  display: block;
  height: 100%;
  
  /* ①ここから追加 */
  background: #fff;
  padding-bottom: 64px;
  position: relative;
}
.bl_card_imgWrapper {
  width: 100%;
  height: 240px;
  background: #999;
}
.bl_card_body {
  /* padding: 20px; */　
  padding: 20px 20px 8px;　 /*←padding-bottomを調整*/
  background: #fff;
}
.bl_card_ttl {
  margin-bottom: 16px;
}
.el_btn {
  width: 200px;
  height: 46px;
  background: #999;
  font-size: 20px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  /* margin: 20px auto 0; 　←削除 */
  
  /* ②ここから追加 */
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
}

●結果

考え方

• 背景の色をカード全体につける
• ボタンを配置するための余白を取る
• その余白の部分にposition: absolute;でボタンを配置する