<div class="cp_tab">
	<div class="cp_tabpanels">
		<label for="tab5_1">First Tab</label>
		<input id="tab5_1" name="cp_tab" type="radio" checked="checked">
		<div class="cp_tabpanel">
			<h4>First Tab</h4>
			<p>First Tab text</p>
		</div>
	</div>
	<div class="cp_tabpanels">
		<label for="tab5_2">Second Tab</label>
		<input id="tab5_2" name="cp_tab" type="radio">
		<div class="cp_tabpanel">
			<h4>Second Tab</h4>
			<p>Second Tab text</p>
		</div>
	</div>
</div>

*, *:before, *:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_tab {
	display: block;
	display: -webkit-flex;
	display:         flex;
	-webkit-flex-wrap: wrap;
	        flex-wrap: wrap;
	margin: 1em auto;
	overflow: hidden;
}
.cp_tab input[type='radio'] {
	border-bottom: 1px solid rgba(239, 237, 239, 0.5);
	cursor: pointer;
	-webkit-appearance: none;
	        appearance: none;
	display: block;
	width: 100%;
	outline: none;
	-webkit-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
}
.cp_tab .cp_tabpanels label {
	cursor: pointer;
	display: block;
	line-height: 1em;
	padding: 2rem 0;
	text-align: center;
}
.cp_tab [type="radio"]:hover,
.cp_tab [type='radio']:focus {
	border-bottom: 1px solid #fd264f;
}
.cp_tab [type='radio']:checked {
	border-bottom: 2px solid #fd264f;
}
.cp_tab [type='radio']:checked + .cp_tabpanel {
	opacity: 1;
}
.cp_tab [type='radio'] + .cp_tabpanel {
	display: block;
	opacity: 0;
	padding: 2rem 0;
	width: 90%;
	-webkit-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
}
.cp_tab .cp_tabpanels {
	width: 50%;
}
.cp_tab .cp_tabpanels [type='radio'] + .cp_tabpanel {
	width: 200%;
	margin-left: 200%;
}
.cp_tab .cp_tabpanels [type='radio']:checked + .cp_tabpanel {
	margin-left: 0;
}
.cp_tab .cp_tabpanels:last-child [type='radio'] + .cp_tabpanel {
	margin-left: 100%;
}
.cp_tab .cp_tabpanels:last-child [type='radio']:checked + .cp_tabpanel {
	margin-left: -100%;
}