Bootstrap Flex контейнеры одинаковой высоты для детей

Я пытаюсь переписать html-таблицу для начальной загрузки flex-div.

Стек о том, как сохранить одинаковую высоту логических дочерних элементов контейнеров?

https://jsfiddle.net/48qdk3r5/1/

Это выглядит как какое-то ошибочное поведение, тогда я пытаюсь установить высоту .content на 100%, следующая строка элементов переполняет первую строку.

<div class = "container">
  <div class = "row">
    <div class = "col">
      <div class = "header">
        <h2>Header</h2>
      </div>
      <div class = "content d-flex">
        <div class = "text-center w-50">
          <h3>Sub1</h3>
          <p>Iam sub 1.</p>
        </div>
        <div class = "text-center w-50">
          <h3>Sub2</h3>
          <p>Iam sub 2.</p>
          <p>Iam sub 2.</p>
        </div>
      </div>
    </div>
    <div class = "col">
      <div class = "header">
        <h2>Header3</h2>
      </div>
      <div class = "text-center content">
          <h3>Sub3</h3>
          <p>Iam sub 3.</p>
      </div>
    </div>
  </div>
<!--end first row -->

  <div class = "row">
    <div class = "col">
      <div class = "header">
        <h2>Header</h2>
      </div>
      <div class = "content d-flex">
        <div class = "text-center w-50">
          <h3>Sub1</h3>
          <p>Iam sub 1.</p>
        </div>
        <div class = "text-center w-50">
          <h3>Sub2</h3>
          <p>Iam sub 2.</p>
        </div>
      </div>
    </div>
    <div class = "col">
      <div class = "header">
        <h2>Header3</h2>
      </div>
      <div class = "text-center content">
          <h3>Sub3</h3>
          <p>Iam sub 3.</p>
          <p>Iam sub 3.</p>
      </div>
    </div>
  </div>
</div>```

I expect all elements of row to be the same height.