CSS - Label & checkbox not aligning same as other labels and checkbox

I'm making a small survey and my "checkbox-label" & checkboxes will not align the same as the other labels. All the labels have the same class. I need it to align the same as the others.

Here is a link to my codepen to show you what I mean:

https://codepen.io/Saharalara/pen/xMGqPa

The HTML:

<div class="rowTab">
            <div class="labels">
              <label id="checkbox-label" for="changes">What do you think we should do to improve our fabulous toilet if any...</br>there should'nt be any but choose please:</label>
            </div>
              <div class"rightTab">
                <ul id="changes">
                  <li class="checkbox"><label><input name="prefer" value="1" type="checkbox" class="userRatings">Cleanliness</label></li>
                  <li class="checkbox"><label><input  name="prefer" value="2" type="checkbox" class="userRatings">Friendliness</label></li>
                  <li class="checkbox"><label><input  name="prefer" value="3" type="checkbox" class="userRatings">Everything, it's shite</label></li>
                  <li class="checkbox"><label><input  name="prefer" value="4" type="checkbox" class="userRatings">Nothing, it's fantastic</label></li>
                  <li class="checkbox"><label><input  name="prefer" value="5" type="checkbox" class="userRatings">No changes required, it's is the best toilet I've ever been to</label></li>
                 </ul>
            </div>
             </div>

The CSS:

.labels{
  display: inline-block;
  text-align: right;
  vertical-align: top;
  margin-top: 20px;
  width: 40%;
  padding: 5px;
  }

.rightTab{
  display: inline-block;
  text-align: left;
  margin-top: 20px;
  vertical-align: middle;
  width: 48%;
  padding: 5px;
    }

.radio, .checkbox{
  position: relative;
  left: -44px;
  display: block;
  padding-bottom: 10px;
    }