title: Moving input radio buttons with CSS
body: <p><a href="https://i.stack.imgur.com/0A4Lt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0A4Lt.png" alt="Enter image description here"></a></p>
  
  <p>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.</p>
  
  <p>How do I do that? I do not wish to use tables or br. I would like to use <a href="http://en.wikipedia.org/wiki/Cascading_Style_Sheets" rel="nofollow noreferrer">CSS</a>; how should I style my CSS?</p>
  
  <pre><code>  &lt;form name="test"&gt;
      &lt;label style="float:left;"&gt;test&lt;/label&gt;
      &lt;input style="display:block" /&gt;
      &lt;label style="float:left;"&gt;test&lt;/label&gt;
      &lt;input style="display:block" /&gt;
      &lt;label style="float:left;"&gt;test&lt;/label&gt;
      &lt;select&gt;
        &lt;option&gt;1&lt;/option&gt;
        &lt;option&gt;2&lt;/option&gt;
      &lt;/select&gt;
      &lt;select&gt;
         &lt;option&gt;a&lt;/option&gt;
         &lt;option&gt;b&lt;/option&gt;
      &lt;/select&gt;
      &lt;input type="radio" name="test" value="test1"&gt;
      &lt;input type="radio" name="test" value="test2"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/NrXzW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NrXzW.png" alt="Enter image description here"></a></p>
  
  <p>If I add more than one radio box:</p>
  
  <p>I tried using <code>+</code> (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.</p>
  
  <p>So I tried to position it relatively (the first radio box) and <code>float:left</code>. But it positions itself too high.</p>