So my nested divs with class=‘inner-container’ are all behaving as I want/expect, ergo separate flex items in a column.
Except for div id=“personal-info-wrapper” class=“inner-container”
and
div id=“checkbox-wrapper” class=“inner-container” directly below it.
They are behaving as one item and if you look where the checkbox for ‘scratches’ is below the dropdown it’s weird. What have I mixed up here? I’m doing a real head scratch.
As a suggestion, switch the Syntax Highlighting in Codepen to help catch errors/typos.
Go to your Codepen profile Settings → Editor Preferences (not the setting for the pen, but for your profile). Switch the Syntax Highlighting to Oceanic Dark and save the setting. Go back to the pen and make sure your new setting is working. The code highlighting will be using different colors. Errors will now be marked in red.