Delete extra space on top of labels from CSS stylized checkbox

I need some help.

I have been "googling" to find a solution but I wasn't able to find out why I'm getting this extra space on top of each label of my CSS stylized checkboxes.

Also I haven't found any similar question here on stack-overflow.

Even using the developer mode of Chrome and Firefox I see nothing (no margin, no padding) that generates that extra space.

<div class="row">
    <div class="col-12 col-lg-6 flex-order-1"><label class="w-100 boton-check"><input type="checkbox" name="my_buttons[]" value="1"><span class="fade-yellow-blue">Button A</span></label></div>
    <div class="col-12 col-lg-6 flex-order-3"><label class="w-100 boton-check"><input type="checkbox" name="my_buttons[]" value="2"><span class="fade-yellow-blue">Button B</span></label></div>
    <div class="col-12 col-lg-6 flex-order-5"><label class="w-100 boton-check"><input type="checkbox" name="my_buttons[]" value="3"><span class="fade-yellow-blue">Button C</span></label></div>
    <div class="col-12 col-lg-6 flex-order-7"><label class="w-100 boton-check"><input type="checkbox" name="my_buttons[]" value="4"><span class="fade-yellow-blue">Button D</span></label></div>
    <div class="col-12 col-lg-6 flex-order-9"><label class="w-100 boton-check"><input type="checkbox" name="my_buttons[]" value="5"><span class="fade-yellow-blue">Button E</span></label></div>
    <div class="col-12 col-lg-6 flex-order-11"><label class="w-100 boton-check"><input type="checkbox" name="my_buttons[]" value="6"><span class="fade-yellow-blue">Button F</span></label></div>
    <div class="col-12 col-lg-6 flex-order-13"><label class="w-100 boton-check"><input type="checkbox" name="my_buttons[]" value="7"><span class="fade-yellow-blue">Button G</span></label></div>
    <div class="col-12 col-lg-6 flex-order-2"><label class="w-100 boton-check"><input type="checkbox" name="my_buttons[]" value="8"><span class="fade-yellow-blue">Button H</span></label></div>
    <div class="col-12 col-lg-6 flex-order-4"><label class="w-100 boton-check"><input type="checkbox" name="my_buttons[]" value="9"><span class="fade-yellow-blue">Button I</span></label></div>
    <div class="col-12 col-lg-6 flex-order-6"><label class="w-100 boton-check"><input type="checkbox" name="my_buttons[]" value="10"><span class="fade-yellow-blue">Button J</span></label></div>
    <div class="col-12 col-lg-6 flex-order-8"><label class="w-100 boton-check"><input type="checkbox" name="my_buttons[]" value="11"><span class="fade-yellow-blue">Button K</span></label></div>
    <div class="col-12 col-lg-6 flex-order-10"><label class="w-100 boton-check"><input type="checkbox" name="my_buttons[]" value="12"><span class="fade-yellow-blue">Button L</span></label></div>
    <div class="col-12 col-lg-6 flex-order-12"><label class="w-100 boton-check"><input type="checkbox" name="my_buttons[]" value="13"><span class="fade-yellow-blue">Button M</span></label></div>
</div>

Here you can see the extra space over each button: https://codepen.io/herni_hdez/pen/Erqvpb

If I add a rule "margin-top: -1.5rem" they go to the desired position, but the labels overlap among checkboxes: https://codepen.io/herni_hdez/pen/bzXrxN