Label inside styled checkbox is moving, Why?

When I'm working on a checkbox, I have it styled the way I need it to be, but the label beside it keeps moving. When unchecked it aligns itself with the bottom of the box, but then when checked it moves to center align it to the box.

.check {
    width: 100%;
    font-weight: normal;
    margin-bottom: 0px;
}

.check label {
    content: " ";
    width: 18px;
    height: 18px;
    border: 1px solid #dae2e6;
    margin-right: 10px;
    display: inline-block;
}

.check label::after {
    font-size: 13px;
    color: #8e989f;
}

.check input[type="checkbox"]:checked + label::after {
    font-family: "Material Icons";
    content: "\e5ca";
}

.check input[type="checkbox"] {
    left: -9999px;
    position: absolute;
}
.check input[type="checkbox"]:checked + label + div {
    display: inline-block;
} 

<label class="check">
                                <input type="checkbox" value="mandatory" name="checkbox1" id="check3">
                                <label for="check3"> </label>
                                Mark as Mandatory
                            </label>

Fiddle