How to align my checkboxes separate lines?

Question

I want to align my checkboxes vertically. I mean every option in one line. I googled it they suggested vertical-align: middle but it just changes the label’s position. I want every checkbox in separate lines. my code is here:

https://jsfiddle.net/Dr277/g9mc762o/2/

Answer 1

Hi and welcome to stackoverflow. It's great that you add link to a fiddle but you MUST add the relevant code here also.

As for your question, quick way to solve it is to wrap labels with element (form?) and style this element as flexbox (you can even delete you existing style):

form {display: flex; flex-flow: column; /* remove this if you want it horizontal   */ }

<div class="form-group">
          <p>Which superpower would you like to have? 
          <span class="clue">(Check all that apply)</span></p>
          <form>
          
          <label>
            <input 
              name="superpower"
              type="checkbox"
              value="mind-read"
              class="input-checkbox"
            >Mind Reading
          </label>
          <label>
            <input 
              name="superpower"
              type="checkbox"
              value="invisibility"
              class="input-checkbox"
            >Invisibility
          </label>
          <label>
            <input 
              name="superpower"
              type="checkbox"
              value="teleportation"
              class="input-checkbox"
            >Teleportation
          </label>
          <label>
            <input 
              name="superpower"
              type="checkbox"
              value="Flying"
              class="input-checkbox"
            >Flying
          </label>
          <label>
            <input 
              name="superpower"
              type="checkbox"
              value="have-superpower"
              class="input-checkbox"
            >I have already a superpower
          </label>
          </form>
        </div>