How to align <label> on the same line with other element - css

Question

How can I get <label> and #slider to be on the same line?
header {
background: #2f2f2f;
width: 600px;
height: 28px;
margin: 0 auto;
padding: 0 10px;
color: #FFF;
font-size: 12px;
}
header a {
color: #FFF;
}
header a:hover,
header a:focus {
color: #DDD;
}
header #title {
padding: 7px 0;
float: left;
}
header #onoff {
padding: 6px 0;
float: right;
height: 16px;
}
header #onoff label#switch input {
display: none;
}
header #onoff label#switch input+#slider {
background: #CCC;
display: inline-block;
width: 27px;
height: 16px;
position: relative;
cursor: pointer;
transition: .4s;
border-radius: 34px;
}
header #onoff label#switch input+#slider:before {
content: "";
background: #FFF;
width: 16px;
height: 16px;
position: absolute;
transition: .4s;
border-radius: 50%;
}
header #onoff label#switch input:checked+#slider {
background: #4CD964;
}
header #onoff label#switch input:checked+#slider:before {
transform: translateX(11px);
}
<header>
<a id="title" href=".">Site title</a>
<span id="onoff"><label id="switch">NIGHT MODE<input id="toggle" type="checkbox"><span id="slider"></span></label>
</span>
</header>

Answer 1

I strongly discourage you to use floats for this. Use a flexbox instead:
header {
background: #2f2f2f;
width: 600px;
height: 28px;
margin: 0 auto;
padding: 0 10px;
color: #FFF;
font-size: 12px;
display: flex;
justify-content: space-between;
}
header a {
color: #FFF;
}
header a:hover,
header a:focus {
color: #DDD;
}
header #title {
padding: 7px 0;
}
header #onoff {
padding: 6px 0;
height: 16px;
}
header #onoff label#switch input {
display: none;
}
header #onoff label#switch input+#slider {
background: #CCC;
display: inline-block;
width: 27px;
height: 16px;
position: relative;
cursor: pointer;
transition: .4s;
border-radius: 34px;
}
header #onoff label#switch input+#slider:before {
content: "";
background: #FFF;
width: 16px;
height: 16px;
position: absolute;
transition: .4s;
border-radius: 50%;
}
header #onoff label#switch input:checked+#slider {
background: #4CD964;
}
header #onoff label#switch input:checked+#slider:before {
transform: translateX(11px);
}
#switch {
display: flex;
align-items: center;
}
<header>
<a id="title" href=".">Site title</a>
<span id="onoff"><label id="switch">NIGHT MODE<input id="toggle" type="checkbox"><span id="slider"></span></label>
</span>
</header>

Answer 2

I think that's what you want.
header {
background: #2f2f2f;
width: 600px;
height: 28px;
margin: 0 auto;
padding: 0 10px;
color: #FFF;
font-size: 12px;
}
header a {
color: #FFF;
}
header a:hover,
header a:focus {
color: #DDD;
}
header #title {
padding: 7px 0;
float: left;
}
header #onoff {
padding: 6px 0;
float: right;
height: 16px;
}
header #onoff label#switch input {
display: none;
}
header #onoff label#switch input+#slider {
background: #CCC;
/* display: inline-block; */
width: 27px;
height: 16px;
position: relative;
cursor: pointer;
transition: .4s;
border-radius: 34px;
}
header #onoff label#switch input+#slider:before {
content: "";
background: #FFF;
width: 16px;
height: 16px;
position: absolute;
transition: .4s;
border-radius: 50%;
}
header #onoff label#switch input:checked+#slider {
background: #4CD964;
}
header #onoff label#switch input:checked+#slider:before {
transform: translateX(11px);
}
#switch {
display: flex;
width: 120px;
flex-direction: row;
justify-content: space-around;
line-height: 16px;
}
<header>
<a id="title" href=".">Site title</a>
<span id="onoff">
<label id="switch">NIGHT MODE<input id="toggle" type="checkbox">
<span id="slider"></span>
</label>
</span>
</header>