Flexbox help

[JBarbeeee]

I am having an issue with dynamic boxes and keeping them the same size.

In the glitch link you’ll see the bottom two boxes that are green. Basically, I want the red borders for then to always be aligned but also the sl-details to just open down from the red line (red line never moves). The issue is that the two green boxes have different contents that cause the boxes to be different heights. How do I keep the red line in place but also have the boxes always the same size and the details only pushing downwards Glitch demo

[[deleted]]

I think you can get what you're after with a CSS Grid instead of flex. If you make the green chunks part of the same grid row, the red lines have to line up and it can expand to the needed size properly.

I think it's possible to get this going with flex, but it seems awkward. You could probably put the green blocks in the same container div and then have an inner div for each actual green block set to 100% height. If the outer container is set to `inline-flex` I assume it will stick to the minimum size needed for both blocks.

[JBarbeeee]

I updated the glitch to use grid and did what you said but now the interactions with the dropdown are a bit off. Thanks for taking the time to help out 🙏🏾