Одинаковая высота flex-item в независимых flex-container

Имеется вот такая конструкция:

<section id="main">
    <div class="flex-container">
        <div class="flex-item"></div>
        <div class="flex-item"></div>
        <div class="flex-item"></div>
    </div>
    <div class="flex-container">
        <div class="flex-item"></div>
        <div class="flex-item"></div>
        <div class="flex-item"></div>
    </div>
</section>

https://codepen.io/dis6/pen/oNgBBwy

flex-item может иметь разное кол-во контента, следовательно, высота может меняться. Задача в том, чтобы flex-itemв обеих колонках (flex-container)всегда имели одинаковую высоту, по самому высокому из двух контейнеров. Кол-во flex-item в каждом из контейнеров неопределённое.

Возможно ли такое реализовать на css-flexbox?

Пока что решение проблемы вижу в медиа-запросе в проблемном диапазоне ширины экрана, где flex-item назначается высота. Загвоздка в том, что я не знаю кол-во контента в итемах, могу лишь предполагать, чего разумеется недостаточно. На смартфоне контейнеры занимают 100% ширины и выстраиваются в колонку, так что проблема отпадает.

Может переверстать на css-grid?

РЕШЕНИЕ: https://codepen.io/dis6/pen/oNgBBwy