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

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.