Keep checkbox position in form when resizing window

I have two columns form. I have checkbox with div pseudo class inside the label. I need checkbox to be positioned in right column and still be inside label. Problem is, I can't change it such a way, that checkbox would be inside label AND would stay at the same position when resizing window.

I could keep checkbox with negative right property so it doesn't change position when resizing, but then it's outside label and unclickable.

I can change width of label - but then checkbox jumps when resizing.

Is there any way to solve this with CSS?

checkbox position without negative right when resizing

checkbox position I need

<div class="left-col"> <label>
<span>text</span>
<input type="checkbox">
<div></div>
</label> </div>

CSS

.left-col {
width:25%; }

label {
width:100%; 
position:relative; }

input[type="checkbox"] + div::before {
 right:-35px !important;
  left: auto !important; }

 input[type="checkbox"] + div::after {
 left: auto !important;
  right: -33px !important;
   width: auto; }