中に入る文字数に影響されずにカードの高さをそろえたい

初歩的な質問で申し訳ありません。

何卒ご教授頂けますと幸いです。

前提・実現したいこと

blogのカード型レイアウトの中のテキスト部分の文字数に影響されずに高さをそろえたいです。
但し、レスポンシブに対応しやすいようにがっつりwidth:heightをpx指定してしまうのは避けたいです。

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

文字列に影響されてそろわない

該当のソースコード

HTML
1<!--    blog -->
2<section class="section-wrapper bg-sky">
3    <div class="inner-wrapper">
4        <h2 class="title">ブログ</h2>
5        <h3 class="en-title">BLOG</h3>
6        <ul class="blog-list flex-box">
7            <li class="blog-card">
8                <img src="img/austin-distel-wawEfYdpkag-unsplash.png" alt="" class="blog-img">
9                <div class="text-wrapper">
10                    <h4 class="blog-title">サイトをリニューアルオープンしました。</h4>
11                    <time>2020.01.23</time>
12                </div>
13             
14            </li>
15            <li class="blog-card">
16                <img src="img/dylan-gillis-KdeqA3aTnBY-unsplash.png" alt="" class="blog-img">
17                
18                <div class="text-wrapper">
19                    <h4 class="blog-title">WebサイトでSEO内部施策に適したコー ディングでどれぐらいサイトが早くなるの か検証してみました</h4>
20                    <time>2020.01.24</time>
21                </div>
22
23            </li>
24            <li class="blog-card">
25                <img src=" img/brooke-cagle-g1Kr4Ozfoac-unsplash.png" alt="" class="blog-img">
26              
27                <div class="text-wrapper">
28                    <h4 class="blog-title">ユアコーディングではデザイナーの方を 広く募集しています。</h4>
29                    <time>2020.01.25</time>
30                </div>
31
32            </li>
33        </ul>
34    </div>
35</section>

該当のソースコード

CSS
1
2html body .inner-wrapper {
3  padding: 17.2vw 21.4vw;
4  margin: 0 auto;
5  text-align: center;
6  padding: 8%;
7}
8html body .flex-box {
9  display: -webkit-box;
10  display: -ms-flexbox;
11  display: flex;
12  -webkit-box-pack: justify;
13      -ms-flex-pack: justify;
14          justify-content: space-between;
15  -webkit-box-align: center;
16      -ms-flex-align: center;
17          align-items: center;
18}
19
20html body .bg-sky {
21  background-color: #EEFBFB;
22}
23html body .blog-card {
24  background-color: #FFFFFF;
25  width: 28vw;
26  display: -webkit-box;
27  display: -ms-flexbox;
28  display: flex;
29  -webkit-box-orient: vertical;
30  -webkit-box-direction: normal;
31      -ms-flex-direction: column;
32          flex-direction: column;
33  -webkit-box-flex: 5;
34      -ms-flex-positive: 5;
35          flex-grow: 5;
36}
37
38html body .blog-img {
39  height: 260px;
40}
41
42html body .text-wrapper {
43  padding: 1.4vw;
44  text-align: right;
45  font-weight: bold;
46}
47
48html body .blog-title {
49  text-align: left;
50}
51