See the Pen Form Components CSS by Tzu Chao (@Eatcake) on CodePen.
I originally thought the first box would simply inherit the styling of it’s parent element, therefore inherit the flex property, but it was not the case, which is why I tried something different, and the 2nd box does do what I wanted, but only in a different container.
div.row
is displayed as row flex. Inside it there is only one child element - div.col
so it fills the row.
Inside the div.col
there is an input
element and label
. As there is no display option specified it uses default (both are inline elements)…
Thank you for the answer. I realized that display properties aren’t inherited only after I posted the question.