flexで横並びになっている要素で高さを合わせる方法

前提

左側にテキストを囲ったDiv、右側に画像を囲ったDivが flexが設定されている状況です。

▼上記文章のイメージ

■■な機能を実装中に以下のエラーメッセージが発生しました。

実現したいこと

左側のテキストが可変になっており、左側のテキストを囲ったDivのサイズに合わせって
右側の画像Divも「左側のテキストの高さ」に合わせてリサイズするＣＳＳを実現したいです。

該当のソースコード

画像を作った時のHTML、CSSになります。

HTML
1    <div class="flex-box">
2        <div class="flex-item" style="background-color: red; height: 200px">
3            <div class="flex-content">
4                <div class="resize">リサイズDIV</div>
5            </div>
6        </div>
7        <div class="flex-item" style="background-color: blue">
8            <div class="img">画像</div>
9        </div>
10    </div>
11
12    <style>
13        .flex-box {
14            width: 1000px;
15            margin: 0 auto;
16            display: flex;
17        }
18        .flex-box .flex-item:nth-child(1) {
19            width: 100%;
20        }
21        .flex-box .flex-item:nth-child(2) {
22            min-width: 200px;
23        }
24        .flex-box .flex-item:nth-child(1) .flex-content {
25            height: 300px;
26        }
27
28        .flex-box .flex-item:nth-child(2) .img {
29            width: 120px;
30            height: calc(100% - 20px);
31            box-sizing: border-box;
32            margin: 10px auto 0 auto;
33            background-color: #cbcbcb;
34            text-align: center;
35            line-height: 190px;
36        }
37        .resize {
38            width: 90%;
39            height: 180px;
40            background-color: #cbcbcb;
41            margin: 10px auto;
42            text-align: center;
43            line-height: 180px;
44        }
45    </style>