title: Radio/checkbox alignment in HTML/CSS
body: <p>What is the cleanest way to align properly radio buttons / checkboxes with text? The only reliable solution which I have been using so far is table based:</p>
  
  <pre><code>&lt;table&gt;
  &lt;tr&gt;
      &lt;td&gt;&lt;input type="radio" name="opt"&gt;&lt;/td&gt;
      &lt;td&gt;Option 1&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;&lt;input type="radio" name="opt"&gt;&lt;/td&gt;
      &lt;td&gt;Option 2&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>This may be frown upon by some. I’ve just spent some time (again) investigating a tableless solution but failed. I’ve tried various combinations of floats, absolute/relative positioning and similar approaches. Not only that they mostly relied silently on an estimated height of the radio buttons / checkboxes, but they also behaved differently in different browsers. Ideally, I would like to find a solution which does not assume anything about sizes or special browser quirks. I’m fine with using tables, but I wonder where there is another solution.</p>