title: How do I create radio button grouped by labels on top
body: <p>I am after this sort of structure in HTML:</p>
  
  <p><a href="https://i.stack.imgur.com/wLcZs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wLcZs.png" alt="enter image description here"></a></p>
  
  <p>Anyone know how I can achieve this so that the above labels are aligned accordingly with the radio buttons? The biggest problem I have is the horizontal labels above each radio button.</p>
  
  <p>Just a pure html and CSS solution would be appreciated.</p>
  
  <p>Here is my lame attempt, I am using Semantic UI React:</p>
  
  <pre><code>&lt;div class="row question-row"&gt;
                          &lt;div class="three wide column radio-statements"&gt;&lt;p&gt;Statement one&lt;/p&gt;&lt;p&gt;Statement two&lt;/p&gt;&lt;p&gt;
                              Statement three&lt;/p&gt;&lt;/div&gt;
                          &lt;div class="five wide column"&gt;
                              &lt;form class="ui form radio-question"&gt;&lt;label class="horizontal-label"&gt;High&lt;/label&gt;&lt;label
                                  class="horizontal-label"&gt;Medium&lt;/label&gt;&lt;label
                                  class="horizontal-label"&gt;Low&lt;/label&gt;&lt;label class="horizontal-label"&gt;N/A&lt;/label&gt;
                                  &lt;div class="inline fields"&gt;
                                      &lt;div class="field"&gt;
                                          &lt;div class="ui fitted radio checkbox"&gt;&lt;input type="radio" class="hidden"
                                                                                       readonly="" tabindex="0"
                                                                                       value="1"&gt;&lt;label&gt;&lt;/label&gt;&lt;/div&gt;
                                      &lt;/div&gt;
                                      &lt;div class="field"&gt;
                                          &lt;div class="ui fitted radio checkbox"&gt;&lt;input type="radio" class="hidden"
                                                                                       readonly="" tabindex="0"
                                                                                       value="2"&gt;&lt;label&gt;&lt;/label&gt;&lt;/div&gt;
                                      &lt;/div&gt;
                                      &lt;div class="field"&gt;
                                          &lt;div class="ui fitted radio checkbox"&gt;&lt;input type="radio" class="hidden"
                                                                                       readonly="" tabindex="0"
                                                                                       value="3"&gt;&lt;label&gt;&lt;/label&gt;&lt;/div&gt;
                                      &lt;/div&gt;
                                      &lt;div class="field"&gt;
                                          &lt;div class="ui fitted radio checkbox"&gt;&lt;input type="radio" class="hidden"
                                                                                       readonly="" tabindex="0"
                                                                                       value="4"&gt;&lt;label&gt;&lt;/label&gt;&lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="inline fields"&gt;
                                      &lt;div class="field"&gt;
                                          &lt;div class="ui fitted radio checkbox"&gt;&lt;input type="radio" class="hidden"
                                                                                       readonly="" tabindex="0"
                                                                                       value="5"&gt;&lt;label&gt;&lt;/label&gt;&lt;/div&gt;
                                      &lt;/div&gt;
                                      &lt;div class="field"&gt;
                                          &lt;div class="ui fitted radio checkbox"&gt;&lt;input type="radio" class="hidden"
                                                                                       readonly="" tabindex="0"
                                                                                       value="6"&gt;&lt;label&gt;&lt;/label&gt;&lt;/div&gt;
                                      &lt;/div&gt;
                                      &lt;div class="field"&gt;
                                          &lt;div class="ui fitted radio checkbox"&gt;&lt;input type="radio" class="hidden"
                                                                                       readonly="" tabindex="0"
                                                                                       value="7"&gt;&lt;label&gt;&lt;/label&gt;&lt;/div&gt;
                                      &lt;/div&gt;
                                      &lt;div class="field"&gt;
                                          &lt;div class="ui fitted radio checkbox"&gt;&lt;input type="radio" class="hidden"
                                                                                       readonly="" tabindex="0"
                                                                                       value="8"&gt;&lt;label&gt;&lt;/label&gt;&lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class="inline fields"&gt;
                                      &lt;div class="field"&gt;
                                          &lt;div class="ui fitted radio checkbox"&gt;&lt;input type="radio" class="hidden"
                                                                                       readonly="" tabindex="0"
                                                                                       value="9"&gt;&lt;label&gt;&lt;/label&gt;&lt;/div&gt;
                                      &lt;/div&gt;
                                      &lt;div class="field"&gt;
                                          &lt;div class="ui fitted radio checkbox"&gt;&lt;input type="radio" class="hidden"
                                                                                       readonly="" tabindex="0"
                                                                                       value="10"&gt;&lt;label&gt;&lt;/label&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                      &lt;div class="field"&gt;
                                          &lt;div class="ui fitted radio checkbox"&gt;&lt;input type="radio" class="hidden"
                                                                                       readonly="" tabindex="0"
                                                                                       value="11"&gt;&lt;label&gt;&lt;/label&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                      &lt;div class="field"&gt;
                                          &lt;div class="ui fitted radio checkbox"&gt;&lt;input type="radio" class="hidden"
                                                                                       readonly="" tabindex="0"
                                                                                       value="12"&gt;&lt;label&gt;&lt;/label&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/form&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong>:</p>
  
  <pre><code>.ui {
  
    .sub-section-grid {
  
      .question-row {
        margin-bottom: 30px;
      }
      .radio-statements {
        top: 20px;
      }
  
      .horizontal-label {
        margin-right: 20px;
        font-family: 'Roboto', sans-serif;
        font-size: 14px;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.57;
        letter-spacing: normal;
        text-align: left;
        color: #868686;
      }
  
      .help-text {
        font-family: 'Roboto', sans-serif;
        font-size: 12px;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.67;
        letter-spacing: normal;
        text-align: left;
        color: rgba(139, 142, 142, 0.7);
      }
  
      .info
      {
        &amp;.circle {
          margin-bottom: 20px;
          margin-top: -40px;
        }
      }
    }
  }
  </code></pre>