Align the checkbox to left of the label - html

Question

I have a checkbox with ripple effects. The below code displays the label text first and then the checkbox
I wanted to display the checkbox first and then the label text. The entire div expands and shrinks sometimes,
<style>
#keyframes ripple {
0% {
transform: scale(0,0);
opacity: 1
}
20% {
transform: scale(25,25);
opacity: 1
}
to {
opacity: 0;
transform: scale(40,40)
}
}
#onoff+label {
position: relative;
display: inline-block;
padding-right: 10px
}
#onoff {
position: absolute;
left: -9999px
}
#onoff+label::after {
content: '';
border: 2px solid rgba(0,0,0,.5);
border-radius: 2px;
position: absolute;
top: 50%;
right: -40px;
transform: translate(-20px,-50%);
box-sizing: border-box;
width: 20px;
height: 20px;
transition: background-color 1s;
background-position: -2px -1px;
background-color: rgba(255,0,0,.4)
}
#onoff:checked+label::after {
border: 2px solid #0f9d58;
background-color: rgba(15,157,88,.7);
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfgBwEQARzBMMQpAAAAN0lEQVQI12NgQAEHGBgYHzAwMAMxO5DN38AgIM/AYGHHwFBTw8Bg94OBQf4DUBgqzdwAVI5qAACbXgn3nmfmHgAAAABJRU5ErkJggg==)
}
#onoff:disabled+label::after {
border: 2px solid rgba(0,0,0,.1);
background-color: rgba(0,0,0,.05);
background-image: none
}
#onoff+label::before {
content: '';
border-radius: 50%;
background-color: rgba(0,0,0,.1);
position: absolute;
box-sizing: border-box;
top: 50%;
right: -10px;
transform: translate(-50%,-50%) scale(0);
width: 1.8px;
height: 1.8px
}
#onoff:focus+label::before {
animation: ripple 1s ease-out
}
</style>
<div align="left" class="onoffdiv">
<input id="onoff" type="checkbox" style="display:table-column"/>
<label for="onoff" style="margin-right: 30px;" class="lbl gray">Turn on/off</label>
<br/>
</div>

Answer 1

you can do so by using following code
#onoff+label {
margin-left: 30px;
position: relative;
}
#onoff+label::after {
left: -10px;
right: auto;
}
#onoff+label::before {
left: 0;
right: auto;
}
<style>
#keyframes ripple {
0% {
transform: scale(0,0);
opacity: 1
}
20% {
transform: scale(25,25);
opacity: 1
}
to {
opacity: 0;
transform: scale(40,40)
}
}
#onoff+label {
position: relative;
display: inline-block;
padding-right: 10px
}
#onoff {
position: absolute;
left: -9999px
}
#onoff+label::after {
content: '';
border: 2px solid rgba(0,0,0,.5);
border-radius: 2px;
position: absolute;
top: 50%;
right: -40px;
transform: translate(-20px,-50%);
box-sizing: border-box;
width: 20px;
height: 20px;
transition: background-color 1s;
background-position: -2px -1px;
background-color: rgba(255,0,0,.4)
}
#onoff:checked+label::after {
border: 2px solid #0f9d58;
background-color: rgba(15,157,88,.7);
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfgBwEQARzBMMQpAAAAN0lEQVQI12NgQAEHGBgYHzAwMAMxO5DN38AgIM/AYGHHwFBTw8Bg94OBQf4DUBgqzdwAVI5qAACbXgn3nmfmHgAAAABJRU5ErkJggg==)
}
#onoff:disabled+label::after {
border: 2px solid rgba(0,0,0,.1);
background-color: rgba(0,0,0,.05);
background-image: none
}
#onoff+label::before {
content: '';
border-radius: 50%;
background-color: rgba(0,0,0,.1);
position: absolute;
box-sizing: border-box;
top: 50%;
right: -10px;
transform: translate(-50%,-50%) scale(0);
width: 1.8px;
height: 1.8px
}
#onoff:focus+label::before {
animation: ripple 1s ease-out
}
#onoff+label {
margin-left: 30px;
position: relative;
}
#onoff+label::after {
left: -10px;
right: auto;
}
#onoff+label::before {
left: 0;
right: auto;
}
</style>
<div align="left" class="onoffdiv">
<input id="onoff" type="checkbox" style="display:table-column"/>
<label for="onoff" class="lbl gray">Turn on/off</label>
<br/>
</div>