get checkbox and label aligned with background

I am having trouble getting a custom checkbox and a label to align correctly with the background being the same size as the checkbox. '

here is the pic

heres the html:

<input type="checkbox" id="myCheckbox"/>
  <label for="myCheckbox">
    <i class="ion-android-checkbox-outline-blank"></i> I would like to receive future emails from you*
  </label>

here is the css:

  form
    display: block

  input[type="checkbox"]
    display: none

  input[type="checkbox"]+label
    transition: all 300ms ease
    font-size: 2rem
    cursor: pointer
    background-color: red
    display:table-cell
    -moz-user-select: -moz-none
    -khtml-user-select: none
    -webkit-user-select: none
    -ms-user-select: none
    user-select: none

    i
      color: #bdc3c7
      font-size: 5.5rem
  input[type="checkbox"]:checked+label
    transition: all 300ms ease
    background-color: darken(red, 10)
    padding: 0

    i
      color: white
      animation: check 1s

  label
    height: 100px
    vertical-align: bottom
    position: relative

any help would be greatful.