JSFiddle - React, Tailwind, and code Playground

Move radio checkboxes below label

by woestijnrog

HTML

<div id="edit-submitted-recommendation" class="form-radios"><div class="form-item form-type-radio form-item-submitted-recommendation">
 <input type="radio" id="edit-submitted-recommendation-1" name="submitted[recommendation]" value="0" class="form-radio">  <label class="option" for="edit-submitted-recommendation-1">Not at all Likely 0 </label>

</div>
<div class="form-item form-type-radio form-item-submitted-recommendation">
 <input type="radio" id="edit-submitted-recommendation-2" name="submitted[recommendation]" value="1" class="form-radio">  <label class="option" for="edit-submitted-recommendation-2">1 </label>

</div>
<div class="form-item form-type-radio form-item-submitted-recommendation">
 <input type="radio" id="edit-submitted-recommendation-3" name="submitted[recommendation]" value="2" class="form-radio">  <label class="option" for="edit-submitted-recommendation-3">2 </label>

</div>
<div class="form-item form-type-radio form-item-submitted-recommendation">
 <input type="radio" id="edit-submitted-recommendation-4" name="submitted[recommendation]" value="3" class="form-radio">  <label class="option" for="edit-submitted-recommendation-4">3 </label>

</div>
<div class="form-item form-type-radio form-item-submitted-recommendation">
 <input type="radio" id="edit-submitted-recommendation-5" name="submitted[recommendation]" value="4" class="form-radio">  <label class="option" for="edit-submitted-recommendation-5">4 </label>

</div>
<div class="form-item form-type-radio form-item-submitted-recommendation">
 <input type="radio" id="edit-submitted-recommendation-6" name="submitted[recommendation]" value="5" class="form-radio">  <label class="option" for="edit-submitted-recommendation-6">Neutral 5 </label>

</div>
<div class="form-item form-type-radio form-item-submitted-recommendation">
 <input type="radio" id="edit-submitted-recommendation-7" name="submitted[recommendation]" value="6" class="form-radio">  <label class="option"...

CSS

.form-radios{
		display: flex;
		justify-content: space-between;
	}
	.form-item{
		display: inline-flex;
		flex-flow: column nowrap;
		
	}
	label{
		order: 1;
		text-align: center;
	}
	input{
		order: 2;
		margin: 0 auto;
	}