I have a list <li> styled as two columns via flexbox. Within each list item, there is a groupbox - (a container whose contents appear when you click on it, i.e. I can open or close the groupbox).
This was made in a Mendix low-code tool so I don't have the code but here is a screenshot from the browser. The groupbox is a .mx-groupbox div with the clickable .h2 header and the content div below that appears or disappears when you click the header.
The problem is that when I open a groupbox in one column, the opposite groupbox in the next column also increases in size (although it remains closed). On the screenshot below, the second groupbox from the top in the left column is open (the two buttons below are its contents), and the second groupbox from the top in the right column has increased (although it remains closed).
If I set a fixed height for <li> - this solves the problem, but then the groupbox does not open (its content overlaps other groupboxes). Is it possible to set a fixed height for <li> only if the groupbox is closed? Is there another solution?
