How to bring the label of toggle buttons to the left - html

Question

I have a switch toggle button for an HTML page
<div>
<label class="switch" style="margin-left:14em;">
<h5>Profile</h5>
<input id="profile-toggle" checked type="checkbox">
<span class="slider round"></span>
</label>
</div>
It shows on the page like this:
I am trying to bring the label to the left side, similar to this:
Does anyone have an idea on how can I do this?
EDIT Toggle CSS
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {display:none;}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #e61610;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #29b6f6;
}
input:focus + .slider {
box-shadow: 0 0 1px #29b6f6;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
PS
The toggle switch works fine, my problem is to bring the label to the left side, in front of the button.

Answer 1

Add this bunch of css code and you are all good.
.switch h5 {
position: absolute;
left: -14rem;
top: 0;
margin: 0.75rem;
}

Answer 2

Try this
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 28px;
margin-left:14em;
}
/* Hide default HTML checkbox */
.switch input {
display: none;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: green;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 1px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: green;
}
input:focus+.slider {
box-shadow: 0 0 1px #29b6f6;
}
input:checked+.slider:before {
-webkit-transform: translateX(2px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.switch h5 {
position: relative;
left: -200px;
top: -50%;
width: 175px;
}
<div>
<label class="switch">
<h5>Do you want to check</h5>
<input id="profile-toggle" checked type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div>
<label class="switch">
<h5>Check Grammar and Spelling on Stackoverflow.com</h5>
<input id="profile-toggle" checked type="checkbox">
<span class="slider round"></span>
</label>
</div>