I am trying to get my radio buttons to align but I am having difficulty doing this. What I am trying to do is have the buttons align with an indentation because I am going to display a caret if the option has been selected. I also want the text to come up just a bit because it's not inline with the actual radio button.
input[type=radio] {
z-index: 3;
width: 26px;
height: 26px;
-moz-appearance: none;
}
label {
font-weight: normal;
font-size: 1.5em;
cursor: pointer;
}
.question-label {
margin-left: 15px;
}
<div class="radio">
<label>
<span class="button"><input type="radio" name="optionsRadios" value="20"></span>
<span class="question-label">True</span>
</label>
</div>
<div class="radio">
<label>
<span><i class="fa fa-caret-right fa-2x correct-answer" aria-hidden="true"></i></span>
<span class="button"><input type="radio" name="optionsRadios" value="20"></span>
<span class="question-label">False</span>
</label>
</div>
Here is what it looks like right now.