Left-align radio button label combo vertically on separate lines with only CSS
<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>