横並びの要素の高さを揃える

・詰まっている箇所
タイトルの行数が変わった場合
横並びの要素の高さを揃えることができないです
・聞きたいこと
横並びのボックスの中身の行数が増えると高さがバラバラになります。
一方の行数が増えた場合、隣の要素の中身の高さも同じ様な高さにするCSSの記述方法があればご教示お願いいたいします。
・実装したい画面
https://gyazo.com/aabcf203162dd1d0993ee05996d82f6f
・現在の画面
https://gyazo.com/128198453a045b3cc3f414e4641bbf33
・ソースコード

HTML
1     <div class="section wrap">
2        <div class="section__item">
3          <div class="section__icon"><img src="assets/images/common/img-dummy-2.png" alt=""></div>
4          <dl class="explanation">
5            <dt class="explanation__heading">2x3カラム</dt>
6            <dd class="explanation__text">2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト</dd>
7          </dl>
8        </div>
9        <div class="section__item">
10          <div class="section__icon"><img src="assets/images/common/img-dummy-2.png" alt=""></div>
11          <dl class="explanation">
12            <dt class="explanation__heading">2x3カラム2x3カラム</dt>
13            <dd class="explanation__text">2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト</dd>
14          </dl>
15        </div>
16        <div class="section__item">
17          <div class="section__icon"><img src="assets/images/common/img-dummy-2.png" alt=""></div>
18          <dl class="explanation">
19            <dt class="explanation__heading">2x3カラム2x3カラム2x3カラム</dt>
20            <dd class="explanation__text">2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト</dd>
21          </dl>
22        </div>
23        <div class="section__item">
24          <div class="section__icon"><img src="assets/images/common/img-dummy-2.png" alt=""></div>
25          <dl class="explanation">
26            <dt class="explanation__heading">2x3カラム2x3カラム2x3カラム</dt>
27            <dd class="explanation__text">2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト</dd>
28          </dl>
29        </div>
30        <div class="section__item">
31          <div class="section__icon"><img src="assets/images/common/img-dummy-2.png" alt=""></div>
32          <dl class="explanation">
33            <dt class="explanation__heading">2x3カラム2x3カラム2x3カラム</dt>
34            <dd class="explanation__text">2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト</dd>
35          </dl>
36        </div>
37        <div class="section__item">
38          <div class="section__icon"><img src="assets/images/common/img-dummy-2.png" alt=""></div>
39          <dl class="explanation">
40            <dt class="explanation__heading">2x3カラム2x3カラム2x3カラム</dt>
41            <dd class="explanation__text">2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト<br>2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト2x3カラムテキスト</dd>
42          </dl>
43        </div>
44      </div>

css
1  .wrap {
2    margin-top: 40px;
3    padding: 0 45px 30px 45px;
4    border-bottom: solid 1px rgb(0, 0, 0);
5  }
6
7  .explanation__heading {
8    margin-top: 20px;
9    font-size: 33px;
10  }
11  .explanation__text {
12    margin-top: 20px;
13    font-size: 14.5px;
14  }
15  .content {
16    display: flex;
17    justify-content: center;
18    padding-top: 35px;
19    margin: 0px auto;
20    padding-bottom: 30px;
21    border-bottom: solid 1px rgb(0, 0, 0);
22  }
23  .content__wrap {
24    width: 35%;
25    margin-left: 35px;
26  }
27  .content__wrap:first-child {
28    margin-left: 0;
29  }
30  .article {
31    display: flex;
32  }
33  .article__item {
34    width: 100%;
35    margin-left: 35px;
36  }
37  .article__item:first-child {
38    margin-left: 0;
39  }
40  .article__item:first-child {
41    margin-left: 0;
42  }
43  .section {
44    display: flex;
45    flex-wrap: wrap;
46  }
47  .section__item {
48    width: 30%;
49    margin-left: 35px;
50  }
51  .section__item:nth-child(3n + 1) {
52    margin-left: 0;
53  }
54  .section__item:nth-child(n + 4) {
55    margin-top: 30px;
56  }

・問題解決するために試したこと
section__itemに display: flex;　flex-direction: column; を使用して縦並びにし、子要素にflexプロパティーで余白の調整（explanationは削除してました）
上記と同じ様にexplanationの中身を縦並びにし子要素の調整をしました
display:tableの使用
よろしくお願いいたします (edited)