Align text with toggle switch - html

Question

I followed instructions of w3schools to create a html toggle switch and I want text to be on the left of it to explain what the slider does but it keeps being put on top of the slider or miss aligned.
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
<form class="options">
<div id="enabled">
<p>Enabled</p>
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
</div>
</form>
the text is in the p tag and the switch in the label.
I have tried removing display inline-block but it caused it to not look right.

Answer 1

Add display: flex; and align-items: center; to the #enabled div and maybe some margin for spacing.
More about Flexbox: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

Answer 2

What you can do is to put the display property of your <p> tag to inline-block and vertical-align to middle. Thus, with a bit of padding to your paragraph, you can center it with your switch button.
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
p {
display: inline-block;
vertical-align: middle;
padding-top: 5px;
padding-right:5px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border-radius: 50%;
}
input:checked+.slider {
background-color: #2196F3;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
<form class="options">
<div id="enabled">
<p>Enabled</p>
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
</div>
</form>