JSFiddle - React, Tailwind, and code Playground
HTML
<div class="checkboxes">
<label> <span>Option: </span></label>
<label><input type="radio" name="group1" id="x" /> <span>Label text x</span></label>
<label><input type="radio" name="group1" id="y" /> <span>Label text y</span></label>
<label><input type="radio" name="group1" id="z" /> <span>Label text z</span></label>
</div>
CSS
.checkboxes label {
display: block;
float: left;
padding-right: 3px;
white-space: nowrap;
}
.checkboxes input {
vertical-align: middle;
}
.checkboxes label span {
vertical-align: middle;
font-size:29px;
}
.label{
font-size:29px;
}
input[type="radio"] {
display: block;
margin: 0 auto 5px auto;
}
label {
text-align: center;
display: inline-block;
width: auto;
padding: 0 20px;
}