Create two column accordion from an array

I have an array containing an accordion and it's items. The size and content of the array is unknown to me.

From this array I want to create a two-sized-column.

I tried with column-count, but it gives me a weird behaviour, when opening the last accordion in the first column or the first accordion in the second column (the accordion content is on a different column than the accordion header):Image may be NSFW.
Clik here to view.

I tried to fix it with break-inside: avoid;, but it doesn't help

.container {  column-count: 2;  border: 1px solid red;}.accordion {  background-color: #eee;  cursor: pointer;  padding: 10px;  width: 100%;  break-inside: avoid;}.panel {  padding: 0 10px;}

https://codepen.io/pandaquests/pen/gbOgbVL

I also tried it flexbox, but when open the accordion, that accordion takes the full width:Image may be NSFW.
Clik here to view.

Eventhough I used flex: 1 1 50%;.

.container {  display: flex;  flex-wrap: wrap;  border: 1px solid red;}.accordion {  flex: 1 1 50%;  background-color: #eee;  cursor: pointer;  padding: 10px;  border: 1px solid green;}.panel {  padding: 0 10px;  flex: 1 1 50%;  border: 1px solid yellow;}

https://codepen.io/pandaquests/pen/qEBRdrd

I then tried a different approach with flexBox but when opened the accordion next to it would also expand (but without revealing the accordion's items):Image may be NSFW.
Clik here to view.

.container {  display: flex;  flex-wrap: wrap;}.item {  flex: 1 1 50%; /* Each item takes up 50% of the container's width */  box-sizing: border-box;  padding: 10px;}.accordion {  background-color: #eee;  cursor: pointer;  padding: 10px;  border: none;  text-align: left;  outline: none;  transition: 0.4s;  width: 100%;}.panel {  padding: 0 10px;  display: none;  background-color: white;  overflow: hidden;}

https://codepen.io/pandaquests/pen/yyLgNEwI played around with grid, but it gives me the same behaviour.

Ideally it should only open the accordion. Accordions underneath it should move downwards, while accordions next to it should not be effected. I fould this code, however it uses two divs for each column:

<div class="columns-container"><div class="column"><div class="accordion-item"><div class="accordion-header">First Item</div><div class="accordion-content"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p></div></div><div class="accordion-item"><div class="accordion-header">Third Item</div><div class="accordion-content"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p></div></div><div class="accordion-item"><div class="accordion-header">Fifth Item</div><div class="accordion-content"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p></div></div><div class="accordion-item"><div class="accordion-header">Seventh Item</div><div class="accordion-content"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p></div></div></div><div class="column"><div class="accordion-item"><div class="accordion-header">Second Item</div><div class="accordion-content"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p></div></div><div class="accordion-item"><div class="accordion-header">Fourth Item</div><div class="accordion-content"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p></div></div><div class="accordion-item"><div class="accordion-header">Sixth Item</div><div class="accordion-content"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p></div></div><div class="accordion-item"><div class="accordion-header">Eighth Item</div><div class="accordion-content"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>.</div></div></div></div>

https://codepen.io/igdaloff/pen/yLmqWXj

Image may be NSFW.
Clik here to view.

Theoretically I could do that, too. But I'm wondering whether it's possible to create two columns filled with accordions without adding new HTML elements.