I'm struggling to align my custom radio buttons alongside text. Here is an example image:
Despite using CSS for styling, I am unable to properly align the radio buttons. Below is a snippet of my HTML:
label.item {
display: inline-block;
position: relative;
}
label.item > input {
visibility: hidden;
position: absolute;
}
label.item > .radio-image::before {
content: url("../tools/unchecked.png");
}
label.item > input[type="radio"]:checked + .radio-image::before {
content: url("../tools/checked.png");
}
label.item > input[type="radio"]:hover + .radio-image::before{
cursor: pointer;
}<div class = "container">
<div class = "form-group">
<label>Body</label>
<label class="item">
<input type="radio" value="Good/Minor Flaws" name="size" required="required" />
<div class="radio-image text-center">Good / Minor Flaws</div>
</label>
<label class="item">
<input type="radio" value="Major Damage" name="size" required="required"/>
<div class="radio-image text-center">Major Damage </div>
</label>
</div>
</div>