title: CSS: how to align radiobutton to legend?
body: <p>I have a form, but my legends are not aligned to the radiobuttons. How can I do that?</p>
  
  <p>I need to align the legen tag with the radio buttons. Like this example:</p>
  
  <p><a href="https://i.stack.imgur.com/drnpk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/drnpk.png" alt="enter image description here"></a></p>
  
  <p><strong>What I have:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/JaVwB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JaVwB.png" alt="enter image description here"></a></p>
  
  <p>I've aligned the radiobuttons but no the legend to them.I need the first letter of each legend aligned with the radio buttons. Like in the image example.</p>
  
  <p><strong>CSS: (to align radiobuttons):</strong></p>
  
  <pre><code>ul, li {
      list-style-type: none;
  }
  
  
  ul.form-items li {
    display: flex; !important;
    justify-content: space-between; !important;
    width: 200px; !important;
    text-align: left; !important;
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>    &lt;form action="/post_url_tamanioscantidades/" method="post"&gt;
    &lt;input type="hidden" name="csrfmiddlewaretoken" value="Phabzw1RqbPnGf2wKo4zoHqWLXogOcfbFR38uxXLeoHeBigRBXhXqO0q9mhFimsB"&gt;
  
  &lt;div id="tamanios"&gt;
     &lt;legend&gt; Selecciona un tamaño&lt;/legend&gt;
        &lt;ul&gt;
          &lt;li&gt;
             &lt;span&gt;
                &lt;input type="radio" name="tamanios" value="2x2" id="id_tamanios_0" required&gt;
                                                      2&amp;quot; x 2&amp;quot; &lt;/span&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;span&gt;
              &lt;input type="radio" name="tamanios" value="3x3" id="id_tamanios_1" required&gt;
                                                      3&amp;quot; x 3&amp;quot;
           &lt;/span&gt;
          &lt;/li&gt;
           &lt;li&gt;
             &lt;span&gt;
               &lt;input type="radio" name="tamanios" value="4x4" id="id_tamanios_2" required&gt;
                                                      4&amp;quot; x 4&amp;quot;
             &lt;/span&gt;
           &lt;/li&gt;
           &lt;li&gt;
             &lt;span&gt;
               &lt;input type="radio" name="tamanios" value="5x5" id="id_tamanios_3" required&gt;
                                                      5&amp;quot; x 5&amp;quot;
             &lt;/span&gt;
         &lt;/li&gt;
     &lt;/ul&gt;
  
   &lt;/div&gt;
  
  
   &lt;div id="cantidades"&gt;
  
      &lt;legend&gt; Selecciona la cantidad&lt;/legend&gt;
  
           &lt;ul&gt;
               &lt;li&gt;
                &lt;span&gt;
                  &lt;input type="radio" name="cantidades" value="100" id="id_cantidades_0" required&gt;
                                                  50
                 &lt;/span&gt;                                                   &lt;span&gt;$69&lt;/span&gt;
                 &lt;span class="savings"&gt;Ahorra 39%&lt;/span&gt;
            &lt;/li&gt;
            &lt;li&gt;
               &lt;span&gt;
                  &lt;input type="radio" name="cantidades" value="100" id="id_cantidades_1" required&gt;
                                                  100 &lt;/span&gt;
                                                  &lt;span&gt;$120&lt;/span&gt;
  &lt;span class="savings"&gt;Ahorra 77%&lt;/span&gt;
            &lt;/li&gt;
            &lt;li&gt;
            &lt;span&gt;
              &lt;input type="radio" name="cantidades" value="150" id="id_cantidades_2" required&gt;
                                                      150
              &lt;/span&gt;
                                                      &lt;span&gt;$509&lt;/span&gt;
             &lt;span class="savings"&gt;Ahorra 60%&lt;/span
           &lt;/li&gt;
         &lt;/ul&gt;
  
      &lt;/div&gt;
  
    &lt;input type="submit" value="Submit"/&gt;
  &lt;/form&gt;
  </code></pre>