How do I align multiple check boxes with their own texts on the same row?

I made a form with some check boxes and the check boxes with their texts are displayed inline:

enter image description here

What I'm trying to do is to display one checkbox with it's text per row so I tried creating a class for all the check boxes and within the CSS, added display: block:

 .checkbox {

          display: block; 

 }

From what I've read, it's better to avoid using br tags all the time in your HTML and attempt to do your styling as much as you can within your CSS.

However, this is what happens:

enter image description here

When trying to search online for this issue, I just get results on how to align multiple check boxes/ fields into the same row.

Here is the HTML:

<p>What would you like to see improved? (Check all that apply)</p>
    <label for="frontEnd">
    <input type="checkbox" class="checkbox" id="frontEnd" value="frontEnd">Front-end Projects</input>
    <label for="frontEnd">
    <input type="checkbox" class="checkbox" id="backEnd" value="backEnd">Back-end Projects</input>
    <input type="checkbox" class="checkbox" id="dataVisualization" value="frontEnd">Data Visualization</input>
    <input type="checkbox" class="checkbox" id="challengesImproved" value="challengesImproved">Challenges</input>
    <input type="checkbox" class="checkbox" id="openSourceCommunity" value="openSourceCommunity">Open Source Community</input>
    <input type="checkbox" class="checkbox" id="gitterHelpRooms" value="gitterHelpRooms">Gitter help rooms</input>
    <input type="checkbox" class="checkbox" id="videos" value="videos">Videos</input>
    <input type="checkbox" class="checkbox" id="cityMeetups" value="cityMeetups">City Meetups</input>
    <input type="checkbox" class="checkbox" id="wiki" value="wiki">Wiki</input>
    <input type="checkbox" class="checkbox" id="forum" value="forum">Forum</input>
    <input type="checkbox" class="checkbox" id="additionalCourses" value="additionalCourses">Additional Courses</input>