在自定义复选框中对齐多行标签

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);
    }
  }
}