title: How to show multiple radioButtons in two columns
body: <p>I am showing radio buttons dynamically in two columns. As you can see in picture
  <a href="https://i.stack.imgur.com/zdT7l.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zdT7l.png" alt="enter image description here"></a></p>
  
  <p>It looks fine in few conditions but sometimes when text is large it looks off. How can I resolve this issue</p>
  
  <p>Here is some code:</p>
  
  <pre><code>.radiobox-padding-top{
      padding-top:15px;
  }
  
  input[type=radio] {
    float: left;
    display: block;
    margin-top: 4px;
  }
  
  label {
    margin-left: 15px;
    display: block;
  }
  </code></pre>
  
  <p>here is html code (I am using angular)</p>
  
  <pre><code>&lt;div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 col-xl-8 remove-padding question-row-face"&gt;
  
    &lt;div class="col-12" &gt;
      &lt;p class="grey-text inlineBlock question-padding"&gt;{{data.help_text}}&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="row" style="margin: 0px"&gt;
      &lt;div class="col-12 radiobox-padding-top"&gt;
        &lt;div class="form-group"&gt;
  
          &lt;span *ngFor="let entry of options; index as i"&gt;
  
            &lt;div class="col-5 inlineBlock"&gt;
              &lt;div class="radio"&gt;
  
                &lt;input type="radio" name="{{data.slug}}" checked value="{{options[i]}}"&gt;
                &lt;label&gt;
                  {{options[i]}}
                &lt;/label&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
          &lt;/span&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>