I would like to have a two columns of accordions. At the moment I used flex layout to do so. But when expanding an accordion in one column it is affecting the elements in the other column. How can I achieve expanding accordions without affecting the height of the other column?
By the way: I also tried it with simpel CSS columns (columns: 2;) and gave the foldout container break-inside: avoid-column; – but when expanding a few accordions on one side they begin to move to the other column… so I could not come to solution with CSS column-count.
I made a CodePen of my problem: 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;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><section class="foldouts"><div class="wrap"><div class="foldout"><div class="header"><h3>Headline 1</h3></div><div class="hiddencontent"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p></div></div><div class="foldout"><div class="header"><h3>Headline 2</h3></div><div class="hiddencontent"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p></div></div><div class="foldout"><div class="header"><h3>Headline 3</h3></div><div class="hiddencontent"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p></div></div><div class="foldout"><div class="header"><h3>Headline 4</h3></div><div class="hiddencontent"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p></div></div><div class="foldout"><div class="header"><h3>Headline 5</h3></div><div class="hiddencontent"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p></div></div><div class="foldout"><div class="header"><h3>Headline 6</h3></div><div class="hiddencontent"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p></div></div></div></section>