Etikett im Inneren Stil Checkbox bewegt sich, warum?

Question

Wenn ich an einem Kontrollkästchen arbeite, habe ich es so gestylt, wie ich es brauche, aber das Etikett neben ihm bleibt in Bewegung. Wenn sie nicht markiert ist, richtet sie sich am unteren Rand der Box aus, aber wenn sie aktiviert ist, wird sie zentriert, um sie an der Box auszurichten.

.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> 

Answer 1

.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; 
 
    float: left; /*MODIFICATION */ 
 
    
 
} 
 

 
.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>

Fügen Sie einfach diese float:left Eigenschaft.

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

} 

Working fiddle