Kindly asking for a review of my markup for the Other Form Controls sub-chapter, exercises 1, 2 and 3 - codepen here.
Further questions:
The default styling for the box is making it look a bit weird. Assuming one would just leverage CSS to have it appear explicitly below the label? Is there a better HTML structure to follow that could achieve the same outcome?
Yes, thatβs correct. CSS would be best way. You could give the labels display: block; so they will break the line. Another possibility would be to add display: flex; to the lis and use flex-flow: column.
If you want to just use HTML you would need to wrap the labels with <div>s to have the same effect. I wouldnβt recommend this approach. HTML should be used to build a semantic structure and CSS to add layout and style.