title: Radio button inside label width issue
body: <p>I have custom radio buttons and I am try to display multiple radio buttons in one line. Currently, my code works fine but my issue is that I am adding fixed width to label which in my case is <strong><code>width:50px;</code></strong>. </p>
  
  <p>If my text is longer... my text overlaps the next radio button. Is there a way I can avoid having fixed widths? Function like calc() does't seem to help in my situation.</p>
  
  <p>I also, tried just using <code>min-width</code> instead of <code>width</code>.</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-css lang-css prettyprint-override"><code>* {
    box-sizing: border-box;
  }
  input[type="radio"] {
    display: none;
    cursor: pointer;
  }
  label {
    cursor: pointer;
    display: inline-block;
    width: 50px;
    position: relative;
  }
  .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>
  <pre class="snippet-code-html lang-html prettyprint-override"><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>
  </div>
  </div>
  </p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>I need the text to be inside the <code>&lt;span class="custom"&gt;</code> tag. I don't have to have the inner span tag there though</p>
  
  <p><strong><a href="https://jsfiddle.net/fz5vhwtx/1" rel="nofollow">JSFiddle Demo</a></strong></p>