折り返した2行目のテキストを高さいっぱいに広げたい

Question

前提・実現したいこと

3つ要素が横並びになっており、左の要素に含まれているテキストを折り返しています。

下記は動作サンプルです。
サンプル(CodeSandBox)

折り返しされたテキストの高さを、他の要素の高さと揃えたいです。
上図で言えば左の要素の2行目を、他の要素のfugaの位置に配置したいです。

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

左の要素と他の要素の高さが揃っていません。

該当のソースコード

<div class="wrap">
      <div class="hoge">
        <span><i>1</i><i>2</i><i>3</i></span>
        <span><i>4</i><i>5</i><i>6</i></span>
        <span><i>7</i><i>8</i><i>9</i></span>
        <span><i>1</i><i>2</i><i>3</i></span>
        <span><i>4</i><i>5</i><i>6</i></span>
        <span><i>7</i><i>8</i><i>9</i></span>
      </div>
      <div class="fuga">
        <span>真ん中</span>
        <span><i>1</i><i>2</i><i>3</i></span>
        <span>fuga</span>
      </div>
      <div class="fuga">
        <span>右</span>
        <span><i>1</i><i>2</i><i>3</i></span>
        <span>fuga</span>
      </div>
    </div>

.wrap {
  border: 1px solid black;
  display: flex;
  width: 250px;
  padding: 16px;
}

.fuga {
  width: 100px;
}

.fuga > * {
  display: block;
  text-align: center;
}

試したこと

左の要素もflexを設定すれば高さいっぱいまで広がってくれると思い、下記のように書いてみました。

.hoge {
  display: flex;
  flex-wrap: wrap;
}

上記で惜しい感じにはなったのですが、高さを揃えることができませんでした。
justify-content: space-betweenの縦版プロパティがあれば高さが揃えられそうです。
また、flexを設定したことで、3桁の数字の間が詰まってしまいました。
3桁の数字の間は確保したいです。

Answer 1

以下を追加すればどうでしょう。

.hoge {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  gap: .5em;
}

justify-content: space-betweenの縦版プロパティがあれば高さが揃えられそうです。

align-content: space-between; です。

また、flexを設定したことで、3桁の数字の間が詰まってしまいました。

3桁の数字の余白は、HTMLコードにspan間に半角空白があるのが原因ですが、flexは半角空白の空白は無視します。ですので gapプロパティで余白を追加します。

CodePentサンプル