Moving input radio buttons with CSS

Question

I wish to move my radiobuttons under each of the selections. Radiobutton "test1" under the first selection and radiobutton "test2" under the second selection. That is, the radiobuttons are below the selection, but next to each other.

How do I do that? I do not wish to use tables or br. I would like to use CSS; how should I style my CSS?

  <form name="test">
    <label style="float:left;">test</label>
    <input style="display:block" />
    <label style="float:left;">test</label>
    <input style="display:block" />
    <label style="float:left;">test</label>
    <select>
      <option>1</option>
      <option>2</option>
    </select>
    <select>
       <option>a</option>
       <option>b</option>
    </select>
    <input type="radio" name="test" value="test1">
    <input type="radio" name="test" value="test2">
</form>

If I add more than one radio box:

I tried using + (adjacent sibling selector) in CSS, but I think it is because the position is absolute. So the next "children" won't align horizontally. I think this is the easiest/"neat" way of doing it.

So I tried to position it relatively (the first radio box) and float:left. But it positions itself too high.

Answer 1

Here is each radio button underneath each select element using only CSS without changing your HTML.

form {
  display: block;
  position: relative;
  padding-bottom: 30px;
}

input[type="radio"] {
  display: inline-block;
  position: absolute;
  bottom: 0;
  left: 30px;
}

input[type="radio"]:last-child {
  left: 70px;
}

JSFiddle Demo: https://jsfiddle.net/3w16q179/1/

More than 2 radio buttons:

JSFiddle Demo: https://jsfiddle.net/3w16q179/6/

Answer 2

This will align the radio buttons below the select inputs, regardless of width of their widths.

input[type="radio"] {
  display: block;
}

<form name="test">
  <label style="float:left;">test</label>
  <input style="display:block" />
  <label style="float:left;">test</label>
  <input style="display:block" />
  <label style="float:left;">test</label>
  <div style="float:left;">
    <select>
      <option>1</option>
      <option>2</option>
    </select>
    <input type="radio">
  </div>
  <div style="float:left;">
    <select>
      <option>2</option>
      <option>3</option>
    </select>
    <input type="radio">
  </div>
</form>