toggle switch with text beside it - html

Question

I'm having trouble getting a toggle switch from the w3c tutorial to line up with some text beside it.
this is the tutorial https://www.w3schools.com/howto/howto_css_switch.asp
and this is my code:
<div class="sliderWrapper">
<div><?php echo __('Postal Address');?> </div>
<label class="switch">
<input type="checkbox" name="data[SplashPage][firstname]">
<span class="slider"></span>
</label>
</div>
<div class="sliderWrapper">
<div><?php echo __('Postal Address');?> </div>
<label class="switch">
<input type="checkbox" name="data[SplashPage][lastname]">
<span class="slider"></span>
</label>
</div>
.sliderWrapper{display: inline-block;margin:24px 24px 24px 24px;}
.sliderWrapper div{display: inline-block;line-height:60px;}
.switch {
position: relative;
display: inline-block;
padding:0px;
width: 54px;
height: 28px;
}
/* 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: #d7d7d7;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 1px;
bottom: 1px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {background-color: #1fb5ad;}
input:focus + .slider {box-shadow: 0 0 1px #1fb5ad;}
input:checked + .slider:before {-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);transform: translateX(26px);}
Can anyone help me out with making the text be vertically aligned with the switch - been banging my head on the table of hours now :-(
jsfiddle: https://jsfiddle.net/vfjgtaoh/

Answer 1

Add the line:
vertical-align: middle;
to your switch class, this will vertically align the contents
Fiddle: https://jsfiddle.net/tzv75zvk/

Answer 2

Add Vertical-align:middle; property to label tag and remove line-height for the div
.sliderWrapper div{
display: inline-block;
}
.switch {
position: relative;
display: inline-block;
padding:0px;
vertical-align:middle;
width: 54px;
height: 28px;
}
Link for reference