JSFiddle - React, Tailwind, and code Playground

HTML

<form id="testing" enctype="application/x-www-form-urlencoded" method="post"><div id="testing-questions">
<div id='test1-descriptions'><span class='low'>Beschrijft mij totaal</span><span class='mid'>Neutraal</span><span class='high'>Beschrijft mij totaal</span></div><div class="options">
<label><input type="radio" name="thesis" id="thesis-0" value="0" required="required"></label><label><input type="radio" name="thesis" id="thesis-1" value="1" required="required"></label><label><input type="radio" name="thesis" id="thesis-2" value="2" required="required"></label><label><input type="radio" name="thesis" id="thesis-3" value="3" required="required"></label><label><input type="radio" name="thesis" id="thesis-4" value="4" required="required"></label><label><input type="radio" name="thesis" id="thesis-5" value="5" required="required"></label><label><input type="radio" name="thesis" id="thesis-6" value="6" required="required"></label></div><div class='test1-questions'><div class='test1-question left'>Ik breng graag mijn tijd door met mensen die toekomstgericht zijn</div><div class='test1-question right'>Ik breng graag mijn tijd door met historici</div></div>

<input type="submit" name="submitbutton" id="submitbutton" value="next">
<input type='reset' value='Reset'/>

CSS

#contentBody {
	margin-left: 0px;
}

#progress-bar {
	width: 400px;
	/*height: 10px;*/
	/*background-color: grey;*/
	margin: 0 20px;
	/*display: inline-block;*/
}

#progress-start, #progress-end {
	display: inline-block;
	font-size: 120%;
	font-weight: bold;
}

#progress-actual {
	/*height: 100%;*/
	/*background-color: #90ee90;*/
}


#progressbar {
	width: 540px;
	margin: 0 auto 30px auto;
}

#testing-questions {
	width: 940px;
	margin: 0 auto;
}

#testing-questions label {
	padding: 15px 53px;
	display: inline-block;
	border-bottom: 1px solid #A5A5A5;
}

#testing-questions input[type=radio] {
	padding-left: 0;
	padding-right: 0;
}

/* Labels */

#test1-descriptions, #test2-descriptions {
	background-color: #800134;
	color: #FFF;
	margin-right: 7px;
	padding: 6px 8px;
}

#test1-descriptions span, #test2-descriptions span {
	width: 33.33%;
	display: inline-block;
	font-size: 11px;
}

.low {
	text-align: left;
}

.mid {
	text-align: center;
}

.high {
	text-align: right;
}

label.selected {
	background: #f9c667;
	background: -moz-linear-gradient(left,  #f9c667 0%, #f79621 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f9c667), color-stop(100%,#f79621));
	background: -webkit-linear-gradient(left,  #f9c667 0%,#f79621 100%);
	background: -o-linear-gradient(left,  #f9c667 0%,#f79621 100%);
	background: -ms-linear-gradient(left,  #f9c667 0%,#f79621 100%);
	background: linear-gradient(to right,  #f9c667 0%,#f79621 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9c667', endColorstr='#f79621',GradientType=1 );
}

.test1-questions, .test2-questions {
	overflow: auto;
	min-height: 90px;
	margin-right: 9px;
}
.test1-questions:after, .test2-questions:after {
	content: ".";
	clear: both;
	visibility: hidden;
}
.test1-question, .test2-question {
	font-size: 14px;
	font-weight: bold;
	margin-top: 5px;
	float: left;
	width: 400px;
}

.test1-question.right, .test2-question.right{
	float: right;
	text-align:...