Left-align radio button label combo vertically on separate lines with only CSS

Question

The Issue

I have a group of radio buttons that are organized vertically, stacked. They are on separate lines by use of <br> 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:

The default alignment:

+----------------------------------------------------------------+
|                                                                |
|                                                                |
|                                                                |
|                                                                |
|                  * choice 1                                    |
|                  * choice 2 is a different length              |
|                  * choice 3 is also long                       |
|                                                                |
|                                                                |
|                                                                |
|                                                                |
|                                                                |
+----------------------------------------------------------------+

The desired left-aligned radio buttons with labels on right:

+----------------------------------------------------------------+
|                                                                |
|                                                                |
|                                                                |
|                                                                |
|        * choice 1                                              |
|        * choice 2 is a different length                        |
|        * choice 3 is also long                                 |
|                                                                |
|                                                                |
|                                                                |
|                                                                |
|                                                                |
+----------------------------------------------------------------+

Made with Asciiflow.com

The code

Here is my code:

CSS & HTML

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 + */

<form method="POST" action="mailto:[email protected]">

  <h2>Visitor Survey</h2>

  <fieldset>

    <label for="myName">Your Name:</label>
    <input type="text" name="myName" id="myName">
    <br>

    <label for="email">Email Address:</label>
    <input type="text" name="email" id="email">
    <br>

  </fieldset>

  <p>What is your favorite movie?</p>

  <input type="radio" name="movie" id="transformers" value="Transformers!">
  <label for="transformers">Transformers!</label>
  <br>
  <input type="radio" name="movie" id="dark-knight" value="Dark Knight">
  <label for="dark-knight">Dark Knight</label>
  <br>
  <input type="radio" name="movie" id="goodwillhunting" value="Good Will Hunting">
  <label for="goodwillhunting">Good Will Hunting</label>

  <br>
  <br>

  <input type="submit" value="Submit Query">
  <input type="reset" value="Reset">

</form>

What I've Tried Already

• Searched the web and Stack Overflow but the results weren't exactly applicable.
• I've tried floating both button and label left, margin-left: 100px, position absolute, but it doesn't work.
• I've tried messing with input[type="radio"] + label (but I need the label to come first), to no avail.
• Wrapping the radio buttons and labels in a fieldset.

My Questions

So, I have several questions:

1. How to do this elegantly with CSS without using divs or fieldsets? Or, in other words, can this be done with plain CSS with just the label and input[type="radio"] selectors?
2. 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?
3. Can I align the radios and their labels in separate lines vertically without using the <br> tag?

Answer 1

Something like this?

1. Stack the radio button and label combo using pseudo elements (:after in this case). No need of <br>.
2. Apply margin-left to input[type="radio"] instead of label.

Using :after I have created a empty block (display: block;). This empty block is placed at the end of label so it pushes the next element to a new line.

Note:

For explanation, I have highlighted the empty block(created by :after) with a red border. Remove if necessary.

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;
}
input[type="radio"] {
  margin-left: 100px;
}
input[type="radio"] + label {
  margin-left: 10px;
}
input[type="radio"] + label:after {
  content: '';
  display: block;
  /* Below code(border: 1px solid red;) is just for illustration, remove if necessary */
  border: 1px solid red;
}
/*input[type="checkbox"]:checked + */

<form method="POST" action="mailto:[email protected]">

  <h2>Visitor Survey</h2>

  <fieldset>

    <label for="myName">Your Name:</label>
    <input type="text" name="myName" id="myName">
    <br>

    <label for="email">Email Address:</label>
    <input type="text" name="email" id="email">
    <br>

  </fieldset>

  <p>What is your favorite movie?</p>

  <input type="radio" name="movie" id="transformers" value="Transformers!">
  <label for="transformers">Transformers!</label>
  <input type="radio" name="movie" id="dark-knight" value="Dark Knight">
  <label for="dark-knight">Dark Knight</label>
  <input type="radio" name="movie" id="goodwillhunting" value="Good Will Hunting">
  <label for="goodwillhunting">Good Will Hunting</label>

  <br>
  <br>

  <input type="submit" value="Submit Query">
  <input type="reset" value="Reset">

</form>