Move radio type input to the right of label

Question

I have to build a form that has radio-type input to the right of the text (text-label) without changing the order of input-tag and label tag.

As the id's for input and label are being set dynamically and maybe due to this reason changing the order is not working instead the radio button is getting vanished. But I am not finding a way to do it.

Below is the code I wrote and the image of the desired outcome.

My code outcome:

Code below (it's a ruby on rails syntax):

<div class="options">
  <input type="radio" id="<%=qid%>op1" name="<%=qid%>" value="<%= @questions[qid]["option1"] %>">
    <label class="option-value" for="<%=qid%>op1">A. <%= @questions[qid]["option1"] %></label>
  </div>

And the desired style I want to give

I also tried writing the input[type"radio"] after the label-tag but it's still not happening. I also tried applying float:right css to input[type="radio] but it's not working either.

Answer 1

• Class options would be better as singular option, and option-* for the children elements of your atom.
• You could use <label> as the wrapper an therefore no need to use for and id attributes
• Don't use inline style
• Use display flex on the label parent
• Use margin-right: auto on the SPAN to distance it from the INPUT element

.option {
  display: flex;
  border: 1px solid #ddd;
  border-radius: 0.3rem;
  font-size: 1.2rem;
  padding: 1rem;
}

.option-value {
  margin-right: auto;
}

<label class="option">
  <span class="option-value">B. Owners</span>
  <input class="option-input" type="radio" name="Q2" value="Owners">
</label>

Tip:
when in need to change the markup order visually, use CSS order (if in a grid or flex context)

.option {
  display: flex;
  border: 1px solid #ddd;
  border-radius: 0.3rem;
  font-size: 1.2rem;
  padding: 1rem;
}

.option-value {
  margin-right: auto;
  order: -1;
}

<label class="option">
  <input class="option-input" type="radio" name="Q2" value="Owners">
  <span class="option-value">B. Owners</span>
</label>