Force radio button and its label to be on same line

Question

If you have multiple radio buttons, each with a label, what is the most simple way to force the button/label pair to always be on the same line, and force the next pair down to the next line?

Large screen:

 () Label 1    () Label 2    () Label 3

On a small screen, what I want is this:

() Label 1
() Label 2
() Label 3

But what I'm getting is something like this:

() Label 1 ()
Label 2 ()
Label 3

Hydrometallurgy

Answer 1

Looks like you need to make some HTML changes as well as CSS changes, I'd guess.

Example:

label {
  display: inline-block;
}

@media screen and (max-width: 768px) {
  label {
    display: block;
  }
}

<label for="radio_1">
  <input type="radio" name="radio" id="radio_1" />
  Label 1
</label>
<label for="radio_2">
  <input type="radio" name="radio" id="radio_2" />
  Label 2
</label>
<label for="radio_3">
  <input type="radio" name="radio" id="radio_3" />
  Label 3
</label>
<label for="radio_4">
  <input type="radio" name="radio" id="radio_4" />
  Label 4
</label>

Sapsucker

Nailed it! I'll mark as answer as soon as I can. Thanks! – Hydrometallurgy

unfortunately, this didn't work in my setting. i had to use <table>, <tr>, <td> to make them on one line. – Garmon