Vertical CSS Toggle Switch

Only works with switch-three

HTML

<label>View</label>
<div class="switch switch-three candy yellow" id="radio-switch">
	<input id="hour3" name="view3" type="radio" value="Hour" checked="checked">
	<label for="hour3" onclick="">Hour</label>
	
	<input id="day4" name="view3" type="radio" value="Day">	
	<label for="day4" onclick="">Day</label>
	
	<input id="week5" name="view3" type="radio" value="Week">
	<label for="week5" onclick="">Week</label>
	
	<span class="slide-button"></span>
</div>
                        
<label>View</label>
<div class="switch switch-four candy yellow" id="radio-switch">
	<input id="hour13" name="view4" type="radio" value="Hour" checked="checked">
	<label for="hour13" onclick="">Hour</label>
	
	<input id="day14" name="view4" type="radio" value="Day">	
	<label for="day14" onclick="">Day</label>
	
	<input id="week15" name="view4" type="radio" value="Week">
	<label for="week15" onclick="">Week</label>

	<input id="week16" name="view4" type="radio" value="Week">
	<label for="week16" onclick="">Week</label>
	
	<span class="slide-button"></span>
</div>                        
                        
<label>View</label>
<div class="switch switch-five candy yellow" id="radio-switch">
	<input id="hour23" name="view5" type="radio" value="Hour" checked="checked">
	<label for="hour23" onclick="">Hour</label>
	
	<input id="day24" name="view5" type="radio" value="Day">	
	<label for="day24" onclick="">Day</label>
	
	<input id="week25" name="view5" type="radio" value="Week">
	<label for="week25" onclick="">Week</label>

	<input id="week26" name="view5" type="radio" value="Week">
	<label for="week26" onclick="">Week</label>

	<input id="week27" name="view5" type="radio" value="Week">
	<label for="week27" onclick="">Week</label>
	
	<span class="slide-button"></span>
</div>

CSS

/* ------------------------------------------
CSS TOGGLE SWITCHES (IonuÈ› Colceriu)
Licensed under Unlicense 
https://github.com/ghinda/css-toggle-switch
------------------------------------------ */

/* Hide by default */

.switch .slide-button,
.toggle p span {
	display: none;
}

/* Toggle Switches */

/* We can't test for a specific feature,
 * so we only target browsers with support for media queries.
 */
@media only screen {

	/* Checkbox
	 */
	.toggle {
		position: relative;
		padding: 0;
		margin-left: 10px;
	}

	/* Position the label over all the elements, except the slide-button
	 * Clicking anywhere on the label will change the switch-state
	 */
	.toggle label {
		position: relative;
		z-index: 3;
		
		display: block;
		width: 100%;
	}

	/* Don't hide the input from screen-readers and keyboard access
	 */
	.toggle input {
		position: absolute;
		opacity: 0;
		z-index: 5;
	}
	
	.toggle p {
		position: absolute;
		left: -100px;
		
		width: 100%;
		margin: 0;
		padding-right: 100px;
		
		text-align: left;
	}
	
	.toggle p span {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 5;
		
		display: block;
		width: 50%;
		margin-left: 100px;
		
		text-align: center;
	}
	
	.toggle p span:last-child {
		left: 50%;
	}

	.toggle .slide-button {
		position: absolute;
		right: 0;
		top: 0;
		z-index: 4;
		
		display: block;
		width: 50%;
		height: 100%;
		padding: 0;
	}

	/* Radio Switch
	 */
	.switch {
		position: relative;
		padding: 0;
	}
	
	.switch input {
		position: absolute;
		opacity: 0;
	}
	
	.switch label {
		position: relative;
		z-index: 2;
        display: block;
		
		margin: 0;
		text-align: center;
	}

	.switch .slide-button {
		position: absolute;
		top: 0;
		left: 0;
		padding: 0;
		z-index: 1;
		
		width: 100%;
	}

	.switch input:last-of-type:checked ~ .slide-button {
		//left: 50%;
	}

	

	/* Shared */
	.toggle,
	.switch {
		display: block;
	}
	
	.switch *,
	.toggle * {
		-webkit-box-sizing: border-box;
		-moz-box-sizing:...