title: Left-align radio button label combo vertically on separate lines with only CSS
body: <h2>The Issue</h2>
  
  <p>I have a group of radio buttons that are organized vertically, stacked. They are on separate lines by use of &lt;br&gt; tag. I want to align them vertically using CSS, left-aligned, 100 pixels from the left. It doesn't seem like it would be that hard, but I haven't got it figured out yet. Here's an illustration I made to clarify the desired result:</p>
  
  <h3>The default alignment:</h3>
  
  <pre><code>+----------------------------------------------------------------+
  |                                                                |
  |                                                                |
  |                                                                |
  |                                                                |
  |                  * choice 1                                    |
  |                  * choice 2 is a different length              |
  |                  * choice 3 is also long                       |
  |                                                                |
  |                                                                |
  |                                                                |
  |                                                                |
  |                                                                |
  +----------------------------------------------------------------+
  </code></pre>
  
  <h3>The desired left-aligned radio buttons with labels on right:</h3>
  
  <pre><code>+----------------------------------------------------------------+
  |                                                                |
  |                                                                |
  |                                                                |
  |                                                                |
  |        * choice 1                                              |
  |        * choice 2 is a different length                        |
  |        * choice 3 is also long                                 |
  |                                                                |
  |                                                                |
  |                                                                |
  |                                                                |
  |                                                                |
  +----------------------------------------------------------------+
  </code></pre>
  
  <p>Made with <a href="http://asciiflow.com/" rel="nofollow noreferrer">Asciiflow.com</a></p>
  
  <h2>The code</h2>
  
  <p>Here is my code:</p>
  
  <h3>CSS &amp; HTML</h3>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>form {
    background-color: #ffffb3;
    font-family: Arial, sans-serif;
    padding: 10px;
    border: 2px solid #000000;
    min-width: 600px;
    max-width: 690px;
    width: 80%;
    margin: 0 auto;
    min-height: 200px;
  }
  label {
    margin-left: 100px;
    postion: absolute;
  }
  /*input[type="checkbox"]:checked + */</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form method="POST" action="mailto:eric.hepperle@pcc.edu"&gt;
  
    &lt;h2&gt;Visitor Survey&lt;/h2&gt;
  
    &lt;fieldset&gt;
  
      &lt;label for="myName"&gt;Your Name:&lt;/label&gt;
      &lt;input type="text" name="myName" id="myName"&gt;
      &lt;br&gt;
  
      &lt;label for="email"&gt;Email Address:&lt;/label&gt;
      &lt;input type="text" name="email" id="email"&gt;
      &lt;br&gt;
  
    &lt;/fieldset&gt;
  
    &lt;p&gt;What is your favorite movie?&lt;/p&gt;
  
    &lt;input type="radio" name="movie" id="transformers" value="Transformers!"&gt;
    &lt;label for="transformers"&gt;Transformers!&lt;/label&gt;
    &lt;br&gt;
    &lt;input type="radio" name="movie" id="dark-knight" value="Dark Knight"&gt;
    &lt;label for="dark-knight"&gt;Dark Knight&lt;/label&gt;
    &lt;br&gt;
    &lt;input type="radio" name="movie" id="goodwillhunting" value="Good Will Hunting"&gt;
    &lt;label for="goodwillhunting"&gt;Good Will Hunting&lt;/label&gt;
  
    &lt;br&gt;
    &lt;br&gt;
  
    &lt;input type="submit" value="Submit Query"&gt;
    &lt;input type="reset" value="Reset"&gt;
  
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <h2>What I've Tried Already</h2>
  
  <ul>
  <li>Searched the web and Stack Overflow but the results weren't exactly applicable.</li>
  <li>I've tried floating both button and label left, margin-left: 100px, position absolute, but it doesn't work.</li>
  <li>I've tried messing with <code>input[type="radio"] + label</code> (but I need the label to come first), to no avail.</li>
  <li>Wrapping the radio buttons and labels in a fieldset.</li>
  </ul>
  
  <h2>My Questions</h2>
  
  <p>So, I have several questions:</p>
  
  <ol>
  <li>How to do this elegantly with CSS <strong>without using divs or fieldsets</strong>? Or, in other words, can this be done with plain CSS with just the label and input[type="radio"] selectors?</li>
  <li>I understand that fieldsets are for accessibility, but I'm wondering is it best practice to use fieldsets, or are they a technique that is growing obsolete?</li>
  <li>Can I align the radios and their labels in separate lines vertically without using the &lt;br&gt; tag?</li>
  </ol>