Responsive Web - Survey form using grid help

1

I am working on learning using a grid for the Web Design Survey Form project and stuck on getting my form working correctly within it. Most of it is ok until I get to checkboxes whereupon the labels get out of alignment. I want the labels for those to be to the right of the checkboxes, unlike the labels for everything else which is on the left. Instead, the labels are getting bumped to the next row.

Here is my code

https://codepen.io/opalko/pen/oNNJbqR

Is it possible to do this with the grid layout I am using? Thank you for any help.
Cheers

2

I don’t quite understand your question, your check box labels are on the right hand side?

3

I’m trying to line the labels and the checkboxes up vertically with the input fields above them like this and without using the “dense” property of grid-auto-flow.

09%20PM

4

Oh, I see, you can just wrap the input element within the label and then put the text after, like so:

<label for="bootcamp">
  <input id="bootcamp" name="bootcamp" type="checkbox">
  Bootcamp
</label>

EDIT:

If you want it to be how it is in the picture set the CSS so that it starts from the second line on the grid column and then align text to be positioned on the left"

label[for="bootcamp"] {
    grid-column-start: 2;
    text-align: left;
}