Justify multiline labels within custom checkboxes

I'm trying to align the checkboxes multiline labels the right way. Sadly I can't change the markup of the checkboxes in order to do this, is there any way to accomplish this without changing my markup or just adjusting the styles ?

Here's the HTML:

<div class="customCheckbox__container">
    <input type="checkbox" value="None" id="filterCheckboxDir2">
    <label for="filterCheckboxDir2">Direcció Oficina de Societat del
     Coneixement</label>
</div>

And here's the SCSS:

.customCheckbox__container {
  margin: 0 0 20px 0;
  input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    + label {
      color: $grey-50;
      cursor: pointer;
      font-size: 14px;
      font-weight: 400;
      padding: 0;
      position: relative;
      &:before {
        content: "";
        margin-right: 7px;
        display: inline-block;
        vertical-align: text-top;
        width: 20px;
        height: 20px;
        background: white;
      }
    }
    &:checked + label:before {
      background-color: $blue-100;
    }
    &:checked + label:before {
      content: "";
      margin-right: 7px;
      display: inline-block;
      vertical-align: text-top;
      width: 20px;
      height: 20px;
    }
    &:checked + label:after {
      content: "";
      position: absolute;
      left: 5px;
      top: 9px;
      background: white;
      width: 2px;
      height: 2px;
      box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white,
        4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
    }
  }
}