Radio button inside label width issue

Question

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 width:50px;.

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.

I also, tried just using min-width instead of width.

* {
  box-sizing: border-box;
}
input[type="radio"] {
  display: none;
  cursor: pointer;
}
label {
  cursor: pointer;
  display: inline-block;
  width: 50px;
  position: relative;
}
.radio span.custom > 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;
}

<label class="radio">
  <input type="radio">
  <span class="custom"><span>One</span></span>
</label>

UPDATE:

I need the text to be inside the <span class="custom"> tag. I don't have to have the inner span tag there though

JSFiddle Demo

Answer 1

Try using :after pseudo element to construct the rounded radio button. And the change the .custom to display: inline so that it takes up the content width. Also add white-space: nowrap to the span in-order for it take the full width of text without breaking.

* {
  box-sizing: border-box;
}

input[type="radio"] {
  display: none;
  cursor: pointer;
}

label {
  cursor: pointer;
  min-width: 50px;
  display:inline-block;
  position:relative;
}

.radio span.custom > span {
  margin-left: 24px;
  margin-right: 10px;
  display: inline-block;
  white-space: nowrap;
  line-height: 22px;
}

.radio .custom {  
  display: inline;
}

.radio .custom:after{ 
  content: '';
  height: 20px;
  left: 0;
  top: 0;
  width: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  position: absolute;
}

.radio input:checked + .custom:before {
    background-color: #0574ac;
    border-radius: 100%;
    border: 3px solid #fff;
    content: "";
    display: block;
    height: 12px;
    position: absolute;
    top: 2px;
    width: 12px;
    z-index: 1;
    left: 2px;
}

.radio input + .custom:after {
  border-radius: 100%;
}

.checkbox input:checked .custom {
  background-color: blue;
  border-color: blue;
}

<label class="radio">
  <input type="radio">
  <span class="custom"><span>One</span></span>
</label>

<label class="radio">
  <input type="radio">
  <span class="custom"><span>Two (longer text)</span></span>
</label>

<label class="radio">
  <input type="radio">
  <span class="custom"><span>Three (another longer text)</span></span>
</label>

<label class="radio">
  <input type="radio">
  <span class="custom"><span>Four</span></span>
</label>