对齐定制复选框内的多标签

Question

我想对齐复选框标签多以正确的方式。可悲的是我无法改变的复选框的标记才能做到这一点，有没有办法做到这一点不改变我的标记或只是调整的风格？

这里的HTML：

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

而这里的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);
    }
  }
}