Survey form example: why elements on own line?

I’m doing the survey form project and can’t figure out what in the code is making the label element and the form control elements have their own line.

https://codepen.io/freeCodeCamp/pen/VPaoNP

Input is a block element

.form-control {
  display: block;
}
1 Like

I don’t know why it’s not working for me. I even copied some of the code over.

https://codepen.io/RutherfordTheBrave/pen/oNXRMxP

ahh! I put display: flex; in .form-group class. Apparently it didn’t work as I expected!

I don’t understand what putting a display:flex on the label element does without it being in a flex container.

Putting display flex on the label makes it a flex container.

If you are asking why it is used on the labels, then it’s because it helps vertically align the inputs nested inside some of the labels (radio and checkbox inputs). It also makes the label not inline so the bottom margin works.

1 Like

Oh. I haven’t gotten that far along in the form. I didn’t look at the html close enough and didn’t even realize you could nest stuff inside of labels. Now it makes more sense. Thanks.