Not able to align text left to the toggle button in html - html

Question

I recently saw a video and created this toggle button code
HTML:
<div class="display">
<label class="label toggle">
<input type="checkbox" class="toggle_input" />
<div class="toggle-control"></div>
</label>
</div>
CSS:
html {
font-size: 16px;
box-sizing: border-box;
}
body {
font-size: 1em;
font-family: arial, sans-serif;
}
.display {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.toggle .toggle-control {
-webkit-transition: 0.3s cubic-bezier(0.98, 0.99, 1, 0.99);
transition: 0.3s cubic-bezier(0.98, 0.99, 1, 0.99);
width: 4em;
height: 2em;
display: block;
border: 2px solid #8E8E93;
border-radius: 2em;
background-color: rgba(0, 0, 0, 0.06);
position: relative;
}
.toggle .toggle-control:after {
-webkit-transition: 0.3s cubic-bezier(0.98, 0.99, 1, 0.99);
transition: 0.3s cubic-bezier(0.98, 0.99, 1, 0.99);
content: "";
width: 2em;
height: 2em;
display: block;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 3px 2px rgba(0, 0, 0, 0.4);
position: absolute;
top: 0;
left: 0;
}
.toggle input {
display: none;
}
.toggle input:checked + .toggle-control {
border-color: #4cd964;
background-color: #4cd964;
}
.toggle input:checked + .toggle-control:after {
left: 2em;
}
Now the i want to add a text left aligned to the toggle button but i am not able to do it.
Expected OUTPUT:
(Some Text) (Toggle Button)
Please help

Answer 1

Change the display:block of the div (which causes it to be displayed on a line of its own) to display:inline-block.
And I added vertical-align:middle in this example, but it's up to you how to want the controls to line out!
html {
font-size: 16px;
box-sizing: border-box;
}
body {
font-size: 1em;
font-family: 'Arial', sans-serif;
}
.display {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.toggle .toggle-control {
-webkit-transition: 0.3s cubic-bezier(0.98, 0.99, 1, 0.99);
transition: 0.3s cubic-bezier(0.98, 0.99, 1, 0.99);
width: 4em;
height: 2em;
display: inline-block; /* changed */
border: 2px solid #8E8E93;
border-radius: 2em;
background-color: rgba(0, 0, 0, 0.06);
position: relative;
vertical-align:middle; /* new; can be removed if desired */
}
.toggle .toggle-control:after {
-webkit-transition: 0.3s cubic-bezier(0.98, 0.99, 1, 0.99);
transition: 0.3s cubic-bezier(0.98, 0.99, 1, 0.99);
content: "";
width: 2em;
height: 2em;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 3px 2px rgba(0, 0, 0, 0.4);
position: absolute;
top: 0;
left: 0;
}
.toggle input {
display: none;
}
.toggle input:checked + .toggle-control {
border-color: #4cd964;
background-color: #4cd964;
}
.toggle input:checked + .toggle-control:after {
left: 2em;
}
<div class="display">
<label class="label toggle">
Some text
<input type="checkbox" class="toggle_input" />
<div class="toggle-control"></div>
</label>
</div>