title: Make radio group labels display nicely inline with radio buttons using pure CSS
body: <p>Previously I used a table to display radio buttons with labels. Now I am trying to do this same thing using only CSS.</p>
  
  <p><img src="https://i.stack.imgur.com/NDmSJ.jpg" alt="this was made using a table"></p>
  
  <p>What can I do in CSS that will make the label text sit nicely on top of the related radio button? This is the HTML:</p>
  
  <pre><code>&lt;div class="controls"&gt;
      &lt;label class="radio"&gt;
          &lt;input type="radio" name="cfimb_5" id="id_cfimb_5_1" value="1"&gt;
          Never
      &lt;/label&gt;
      &lt;label class="radio"&gt;
           &lt;input type="radio" name="cfimb_5" id="id_cfimb_5_2" value="2"&gt;
      &lt;/label&gt;
      &lt;label class="radio"&gt;
          &lt;input type="radio" name="cfimb_5" id="id_cfimb_5_3" value="3"&gt;
          Sometimes
      &lt;/label&gt;
      &lt;label class="radio"&gt;
          &lt;input type="radio" name="cfimb_5" id="id_cfimb_5_4" value="4"&gt;
      &lt;/label&gt;
      &lt;label class="radio"&gt;
          &lt;input type="radio" name="cfimb_5" id="id_cfimb_5_5" value="5"&gt;
          Frequently
      &lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is a codepen: <a href="http://codepen.io/anon/pen/keuhl" rel="nofollow noreferrer">http://codepen.io/anon/pen/keuhl</a></p>