Макет Flexbox с двумя контейнерами [закрыто] ⇐ CSS

[Anonymous]

Есть ли способ добиться следующего макета с двумя контейнерами и флексбоксом? Оранжевый и красный прямоугольники представляют собой флексбокс-контейнеры с элементами в них, а синий и зеленый — это соответствующие заголовки групп. Я хотел бы посмотреть, смогу ли я выстроить в линию два гибких контейнера, как в предоставленном мной макете. Моя проблема в том, что если последний элемент первого контейнера переносится на следующую строку, он перемещает второй контейнер на новую строку. Я бы хотел, чтобы элементы из второго контейнера продолжали находиться на строке, в которой был обернут последний элемент первого контейнера.
Я пытаюсь получить такой макет, но не уверен, что это так. возможно с флексбоксом. Есть идеи?
Желаемый макет:

Код: Выделить всё

.item-container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
row-gap: 3.25rem;
padding-top: 1rem;
width: 100%;
}

.group-container {}

.main-container {
display: flex;
justify-content: space-between;
row-gap: 1.875rem;
width: 100%;
max-width: 220px;
flex-wrap: wrap;
}

.item {
width: 100px;
height: 100px;
background-color: red;
}

.item-2 {
width: 100px;
height: 100px;
background-color: orange;
}

.heading {
height: 20px;
width: 100%;
background-color: green;
}

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/790 ... containers