Checkbox and Label Alignment

So I have a small issue and I can't seem to figure out what to do. I have a checkbox and a label. And I want to lower the label a few pixels down, without touching the checkbox.

How can I achieve this with this code structure - here's the Fiddle?

And here's the code:

 

.form-check {      
  margin-bottom: 0;
  margin-top: 3px;
.custom-checkbox-container {
  input[type="checkbox"] {
    display: none;
    & + label {
      position: relative;
      font-family: 'Open Sans', sans-serif;
      letter-spacing: 0.5px;
      font-size: 10px;
      color: #292a2c;
      text-transform: uppercase;
      font-weight: 700;
    }
    & + label:before {
      content: " ";
      box-sizing: border-box;
      display: inline-block;
      vertical-align: middle;
      width: 20px;
      height: 20px;
      margin-right: 8px;
      border: 2px solid #787878;
    }
    & + label:after {
      content: " ";
      opacity: 0;
      position: absolute;
      width: 12px;
      height: 7px;
      top: 4px;
      left: 4px;
      background: transparent;
      border: 2px solid #787878;
      border-top: none;
      border-right: none;
      transform: rotate(-45deg);
      transition: opacity .3s;
    }
    &:checked + label:after {
      opacity: 1;
    }
  }
  }
}

Thank you!