title: space between the first label and radio buttons for an inline radio button group
body: <p>I need to have space between the first label and the inline radio button group as in the following image:
  <a href="https://i.stack.imgur.com/TM6Af.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TM6Af.png" alt="image"></a></p>
  
  <p>Example, space between I'm overweight or obese and Yes, No buttons etc and i need to have a horizontal line at bottom as in image. I tried the following:</p>
  
  <pre><code>&lt;form class="j-forms" novalidate&gt;
  &lt;div class="unit"&gt;
  &lt;div class="inline-group"&gt;
  &lt;label style="margin-right: 20px !important;"&gt;I'm overweight or obese
  &lt;label class="radio"&gt;
  &lt;input type="radio" name="i-radio"&gt;
  &lt;i&gt;&lt;/i&gt;
  Yes
  &lt;/label&gt;
  &lt;label class="radio"&gt;
  &lt;input type="radio" name="i-radio"&gt;
  &lt;i&gt;&lt;/i&gt;
  No
  &lt;/label&gt;
  &lt;label class="radio"&gt;
  &lt;input type="radio" name="i-radio"&gt;
  &lt;i&gt;&lt;/i&gt;
  Don't know
  &lt;/label&gt;
  &lt;/label&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>But the following css is not providing the space:</p>
  
  <pre><code>&lt;label style="margin-right: 20px !important;"&gt;I'm overweight or obese
  </code></pre>
  
  <p>I tried right-padding too without any effect. <strong>How can i add space, the horizontal lines at bottom and multiple rows of buttons as in the image</strong>. </p>
  
  <p>Soliciting help from CSS experts. </p>