[CSS question] can someone explain to me why these 2 textboxes behave differently

#1

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.

#2

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)…

#3

Thank you for the answer. I realized that display properties aren’t inherited only after I posted the question.

#4