Custom CSS checkbox and aligning tick on multiple lines

I've created a custom checkbox using :before and :after pseudo-elements on a <span>, which works great on single lines, but the tick hovers above the box when there's more than one line of text in its <span>.

I've tried using relative values for positioning, but nothing has worked.

<ul class="calendar-filter-menu-cont">
  <li>
    <label>
      <input type="checkbox">
      <span>One line</span>
    </label>
  </li>

  <li>
    <label>
      <input type="checkbox">
      <span>This is the second item in the list</span>
    </label>
  </li>

  <li>
    <label>
      <input type="checkbox">
      <span>This is the third item in the list</span>
    </label>
  </li>
</ul>


ul.calendar-filter-menu-cont {
  color: black;
  column-count: 3;
  max-width: 500px;
}
ul.calendar-filter-menu-cont > li {
  break-inside: avoid-column;
}
ul.calendar-filter-menu-cont > li label {
  display: flex;
  position: relative;
}
ul.calendar-filter-menu-cont > li label:not(:last-child) {
  margin-bottom: 10px;
}
ul.calendar-filter-menu-cont > li label input[type="checkbox"] {
  margin-right: 1em;
  opacity: 0;
}
ul.calendar-filter-menu-cont > li label input[type="checkbox"] + span:before {
  content: '';
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  border: 1px solid #979797;
  width: .8em;
  height: .8em;
  background-color: #f3f3f3;
  box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.2);
}
ul.calendar-filter-menu-cont > li label input[type="checkbox"]:checked + span:after {
  content: '';
  position: absolute;
  top: .7ex;
  left: .35ex;
  width: .9ex;
  height: .45ex;
  background: rgba(0, 0, 0, 0);
  border: 3px solid blue;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
}

Demo: https://codepen.io/anon/pen/PVGxBz