Расположение блоков во флекс-контейнере

Добрый день! Есть флекс-контейнер и в нем необходимо расположить 3 блока по схеме как на картинке.

   <div class="flex">
      <div class="">
        <h3 class="">
          Заголовок
        </h3>
        <div class="">
          <p class="">
            текст
          </p>
        </div>
      </div>
      <div class="">
        <h3 class="">
          Заголовок
        </h3>
        <div class="">
          <p class="">
            текст
          </p>
        </div>
      </div>
      <div class="">
        <h3 class="">
          Заголовок
        </h3>
        <div class="">
          <p class="">
            текст
          </p>
      </div>
    </div>

.flex {
  display: flex;
  flex-wrap: wrap;
  align-self: center;
}

Сейчас все блоки одинакового размера. Как можно сделать правый блок другой высоты?

<style>
    * {
      box-sizing: border-box;
    }
    .flex {
      --height: 100px;
      --gap: 1rem;
      display: flex;
      flex-wrap: wrap;
      align-self: center;
      width: fit-content;
      gap: var(--gap);
      border: 5px solid orange;
      padding: 1rem;
      position: relative;
    }
    .flex > div {
      border: 5px solid orangered;
      height: var(--height);
      padding: 0.5rem;
    }
    .flex .d2 {
      height: calc(var(--height) * 2 + var(--gap));
    }
    .flex .d3 {
      position: absolute;
      top: calc(var(--height) + 2 * var(--gap));
    }
  </style>
    <div class="flex">
      <div class="d1">
        <h3 class="">Заголовок</h3>
        <div class="">
          <p class="">текст 1</p>
        </div>
      </div>
 
      <div class="d2">
        <h3 class="">Заголовок</h3>
        <div class="">
          <p class="">текст 2</p>
        </div>
      </div>
 
      <div class="d3">
        <h3 class="">Заголовок</h3>
        <div class="">
          <p class="">текст 3</p>
        </div>
      </div>
    </div>