3つのカードの高さを揃えるため、時間の上の余白を調節したい。

Question

実現したいこと

1.下記写真のように、3つのカードの高さを揃えるために、日付の上に余白をつけたい。
2. 写真のアスペクト比を高さ260/横389で維持したい。

↓見本（2枚）

前提

1.日付にmargin-top: auto;を使用したが、効かなかった。
2. 写真のアスペクト比を維持するために.blog-card_thumb &:beforeに
padding-top :calc((260/389)*100%)で設定したが、
写真の上に余白ができてしまった。

発生している問題・エラーメッセージ

現状は以下の写真です。
初歩的でお恥ずかしいですが、宜しくお願い致します。

該当のソースコード

/* blog
------------------------------------------------------ */
.blog-card {
    box-shadow: 0px 3px 6px #00000029;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    background: #fff;
}
.blog-card_thumb {
    position: relative;
    overflow: hidden;
    order: -1;
    &:before {
        content: "";
        display: block;
    }
    >img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        transition: 0.5s;
    }
}
.card-body {
    padding: 15px 30px 15px 15px; 
    span{
        margin-top: auto;
        font-size: clamp(14px,2.8vw,16px);
        text-align: right;
    }
}
.card-body_text {
    font-size: clamp(14px,2.8vw,18px);
    line-height: 1.5;
    text-align: left;
}
/* blog--col2
------------------------------------------------------ */
.blog-cards {
    display: flex;
    flex-direction: column;
    margin-bottom: -20px;
}
@include small {
    .cards--col3 {
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
     }
     .blog-card {
        width: calc((100% - 30px)/2);
    }
    
}

/* blog--col3
------------------------------------------------------ */

@include medium {
    .blog-card {
        width: calc((100% - 60px)/3);
    }
}

<section class="blog _bg">
                <div class="section-inner">
                    <h2 class="section-ttl">
                        <span class="section-ttl_main">ブログ</span><!-- /.section-ttl_main -->
                        <span class="section-ttl_sub">Blog</span><!-- /.section-ttl_sub -->
                    </h2><!-- /.section-ttl -->
                    <div class="blog-cards cards--col3">
                        <div class="blog-card">
                            <div class="card-body">
                                <p class="card-body_text">サイトをリニューアルオープンしました。</p><!-- /.card-body_text -->
                                <span><time datetime="2020.01.23">2020-01-23</time></span><!-- /.datetime -->
                            </div><!-- /.card-body -->
                            <div class="blog-card_thumb">
                                <figure><img src="img/austin-distel-wawEfYdpkag-unsplash.png" alt=""></figure>
                            </div><!-- /.blog-card_thumb -->
                        </div><!-- /.blog-card -->
                        <div class="blog-card">
                            <div class="card-body">
                                <p class="card-body_text">WebサイトでSEO内部施策に適したコー ディングでどれぐらいサイトが早くなるの か検証してみました</p>
                                <!-- /.card-body_text -->
                                <span><time datetime="2020.01.24">2020-01-24</time></span><!-- /.datetime -->
                            </div><!-- /.card-body -->
                            <div class="blog-card_thumb">
                                <figure><img src="img/dylan-gillis-KdeqA3aTnBY-unsplash.png" alt=""></figure>
                            </div><!-- /.blog-card_thumb -->
                        </div><!-- /.blog-card -->
                        <div class="blog-card">
                            <div class="card-body">
                                <p class="card-body_text">ユアコーディングではデザイナーの方を 広く募集しています。</p><!-- /.card-body_text -->
                                <span><time datetime="2020.01.25">2020-01-25</time></span><!-- /.datetime -->
                            </div><!-- /.card-body -->
                            <div class="blog-card_thumb">
                                <figure><img src="img/brooke-cagle-g1Kr4Ozfoac-unsplash.png" alt=""></figure>
                            </div><!-- /.blog-card_thumb -->
                        </div><!-- /.blog-card -->
                    </div><!-- /.blog-cards cards--col3 -->
                </div><!-- /.blog-inner -->

            </section><!-- /.blog -->

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

提示のコードでは動作しないので、一部修正していますが、ご希望のことは下記のようなものでしょうか。

CodePentサンプル

上記のサンプルについての解説

1.下記写真のように、3つのカードの高さを揃えるために、日付の上に余白をつけたい。

日付をspanで囲んでいますが、spanではインライン要素のためmargin、text-alignなどは効きません。
ここは、spanではなくdivなどのブロック要素にするか、display: block; でブロックタイプに変換すべきでしょう。
そのうえで、親要素である.card-bodyに下記のように設定すればいいでしょう。

.card-body {
  flex-grow: 1; /* 高さを拡張する */
  display: flex;
  flex-direction: column; /* 垂直方向に並べる */
  justify-content: space-between; /* 両端揃え */

2.写真のアスペクト比を高さ260/横389で維持したい。

aspect-ratio で設定できます。

aspect-ratio - CSS: カスケーディングスタイルシート | MDN

Comments

[spn]

お陰様でうまいこといきました。
ご丁寧にありがとうございました。

Answer 2

とりあえず1番目の課題だけ回答します🙏

1.下記写真のように、3つのカードの高さを揃えるために、日付の上に余白をつけたい。

.card-body の高さを100%にして、日付の span を absolute で右下に指定すればうまく行くと思います。

  .card-body {
      padding: 15px 30px 15px 15px;
+     height: 100%;
+     position: relative;
      span{
-         margin-top: auto;
          font-size: clamp(14px,2.8vw,16px);
-         text-align: right;
+         display: inline-block;
+         position: absolute;
+         right: 1.8em;
+         bottom: .5em;
      }
  }

Comments

[spn]

わかりやすく丁寧にありがとうございました。
一番早く回答していただいて助かりました。