How can I get `<label>` and `#slider` to be on the same line?

```css
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);
}
```

```html
<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>
```