Аккордеоны в двухколоночном гибком макете: изменение высоты в одном столбце влияет на другой столбец. ⇐ CSS

[Anonymous]

Мне хотелось бы иметь две колонки аккордеонов. На данный момент я использовал для этого гибкую компоновку. Но при раскрытии аккордеона в одном столбце это влияет на элементы в другом столбце. Как я могу добиться расширения аккордеонов, не затрагивая высоту другого столбца?
Кстати: я также попробовал это с простыми столбцами CSS (столбцы: 2;) и дал разрыв складного контейнера. -внутри: избежать столбца; – но при расширении нескольких аккордеонов с одной стороны они начинают перемещаться в другой столбец... поэтому я не смог найти решение с помощью подсчета столбцов CSS.
Я создал CodePen для своей проблемы : https://codepen.io/xj6652/pen/qBgqWBp

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

$('.header').click(function(){
$(this).toggleClass('active');
$(this).next('.hiddencontent').slideToggle();
})

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

section.foldouts .wrap {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}
section.foldouts .wrap .foldout {
width: calc(50% - 10px);
break-inside: avoid-column;
background: #e5e5e5;
}
section.foldouts .wrap .header {
cursor: pointer;
padding: 0.3em;
border-bottom: 1px solid #b4b4b4;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 20px;
}
section.foldouts .wrap .hiddencontent {
display: none;
padding: 0.5em;
}
section.foldouts .wrap .hiddencontent p {
font-size: 20px;
}

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

Headline 1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.




Headline 2

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.




Headline 3

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.




Headline 4

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.




Headline 5

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.




Headline 6

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

Подробнее здесь: https://stackoverflow.com/questions/774 ... mn-is-affe