title: Radio button's appearing one over another
body: <p>I have custom radio buttons on my application. My issue is that currently the radio buttons display fine individually. When I try to have two of them in one line... They appear over each other instead of beside each other. I can't change my HTML and can only mess with the CSS. Any help will be appreciated. I was thinking it was due to the width of each label but giving it a low width had the same result.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;label class="radio"&gt;
    &lt;input type="radio"&gt;
    &lt;span class="custom"&gt;&lt;span&gt;One&lt;/span&gt;&lt;/span&gt;
  &lt;/label&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>* {
    box-sizing: border-box;
  }
  
  input[type="radio"] {
    display: none;
    cursor: pointer;
  }
  
  label {
    cursor: pointer;
  }
  
  .radio span.custom &gt; span {
    margin-left: 22px;
  }
  
  .radio .custom {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    display: inline-block;
    height: 20px;
    left: 0;
    position: absolute;
    top: 0;
    width: 20px;
  }
  
  .radio input:checked + .custom:after {
    background-color: #0574ac;
    border-radius: 100%;
    border: 3px solid #fff;
    content: "";
    display: block;
    height: 12px;
    position: absolute;
    top: 0;
    width: 12px;
  }
  
  .radio input + .custom {
    border-radius: 100%;
  }
  
  .checkbox input:checked .custom {
    background-color: blue;
    border-color: blue;
  }
  </code></pre>
  
  <p><strong><a href="https://jsfiddle.net/fz5vhwtx/" rel="nofollow">JSFiddle Demo</a></strong></p>