title: Aligning radio-buttons with labels in HTML
body: <p>I have radio buttons for multiple choice selection. Labels of radio buttons can be consist of multiple lines (see examples below) (they can technically be mini web pages). </p>
  
  <p>How can I produce a form that looks like second example (below) and select the radio button when its' label is clicked (without javascript) as implemented in first example below?</p>
  
  <p><strong>First Example:</strong>
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="answers"&gt;
    &lt;label&gt;
      &lt;input type="radio" name="answer" value="336"/&gt;
      &lt;i&gt;&lt;p&gt;Morbi consequat at mi vitae hendrerit. &lt;/p&gt;
         &lt;p&gt;Quisque pharetra, mauris id blandit &lt;strong&gt;consectetur&lt;/strong&gt;.&lt;/p&gt;
      &lt;/i&gt;
  &lt;/label&gt;
    &lt;br&gt;
    &lt;label&gt;
      &lt;input type="radio" name="answer" value="337"/&gt;
      &lt;i&gt;&lt;p&gt;Morbi consequat at mi vitae hendrerit. Quisque pharetra, mauris id
          blandit consectetur, erat risus mattis quam, ac venenatis felis ante nec
          mi. Curabitur diam lectus, ultrices a consequat sodales, laoreet eu
          odio. Quisque sit amet pulvinar ligula. Sed ullamcorper metus non odio
          sagittis malesuada. Fusce a lorem nisl. Fusce eu magna sed ante blandit
          semper. Vivamus pulvinar nulla nec elit pharetra vestibulum.&lt;/p&gt;
      &lt;/i&gt;
  &lt;/label&gt;
    &lt;br&gt;
    &lt;label&gt;
      &lt;input type="radio" name="answer" value="338"/&gt;
      &lt;i&gt;&lt;p&gt;&lt;img alt="alt text"           src="https://upload.wikimedia.org/wikipedia/commons/9/90/Wikipedia_article_count_graph_28_march_2003.png"
                 title="Logo Title Text 1"&gt;&lt;/p&gt;
      &lt;/i&gt;
  &lt;/label&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Second Example:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="answers"&gt;
    &lt;table border="0"&gt;
      &lt;tr style="vertical-align: middle;"&gt;
        &lt;td style="text-align: center;"&gt;
          &lt;input type="radio" name="answer" value="336" /&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;label&gt;
        &lt;i&gt;&lt;p&gt;Morbi consequat at mi vitae hendrerit. &lt;/p&gt;
           &lt;p&gt;Quisque pharetra, mauris id blandit &lt;strong&gt;consectetur&lt;/strong&gt;.&lt;/p&gt;
        &lt;/i&gt;
    &lt;/label&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr style="vertical-align: middle;"&gt;
        &lt;td style="text-align: center;"&gt;
          &lt;input type="radio" name="answer" value="337" /&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;label&gt;
        &lt;i&gt;&lt;p&gt;Morbi consequat at mi vitae hendrerit. Quisque pharetra, mauris id
            blandit consectetur, erat risus mattis quam, ac venenatis felis ante nec
            mi. Curabitur diam lectus, ultrices a consequat sodales, laoreet eu
            odio. Quisque sit amet pulvinar ligula. Sed ullamcorper metus non odio
            sagittis malesuada. Fusce a lorem nisl. Fusce eu magna sed ante blandit
            semper. Vivamus pulvinar nulla nec elit pharetra vestibulum.&lt;/p&gt;
        &lt;/i&gt;
    &lt;/label&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr style="vertical-align: middle;"&gt;
        &lt;td style="text-align: center;"&gt;
          &lt;input type="radio" name="answer" value="338" /&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;label&gt;
        &lt;i&gt;&lt;p&gt;&lt;img alt="alt text"           src="https://upload.wikimedia.org/wikipedia/commons/9/90/Wikipedia_article_count_graph_28_march_2003.png"
                   title="Logo Title Text 1"&gt;&lt;/p&gt;
        &lt;/i&gt;
    &lt;/label&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>