横並びの要素で高さを合わせたい

前提・実現したいこと

.flow__item_textのテキスト量が変わったら.flow__item_titleと.flow__item_numの高さも変わってほしいです。
レスポンシブで.flow__item_textを一段下げたいので<table>は避けたいです。

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

display: flex;で横並びにしましたが高さが揃いません。

該当のソースコード

html
1      <div class="flow">
2        <div class="flow__content">
3          <div class="flow__item">
4              <div class="flow__item_num">01</div><!-- /.flow__item_num -->
5              <h3 class="flow__item_title">
6                タイトル
7              </h3><!-- /.flow__item_title -->
8              <p class="flow__item_text">
9                テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
10              </p><!-- /.flow__item_text -->
11          </div><!-- /.flow__item -->
12        </div><!-- /.flow__content -->
13      </div><!-- /.flow -->

scss
1.flow {
2  padding-top: 67px;
3  &__content {
4    margin-top: 40px;
5  }
6  &__item {
7    display: flex;
8    align-items: center;
9    &_flex {
10      display: flex;
11      align-items: center;
12    }
13    &_num {
14      background-color: yellow;
15      text-align: center;
16      height: 100%;
17      width: 64px;
18      padding-top: 22px;
19      padding-bottom: 22px;
20    }
21    &_title {
22      padding-top: 22px;
23      padding-bottom: 22px;
24      background-color: blue;
25      width: 50%;
26    }
27    &_text {
28      background-color: gray;
29      padding-top: 22px;
30      padding-bottom: 22px;
31    }
32  }
33}