<div class="prodprice">
  <div class="prodlicen">
    <label for="radItem1" class="md-radio has--add-text">
      <input type="radio" id="radItem1" name="radItem[]" class="md-radio__input">
      <span class="md-radio__custom">
        <span class="md-radio__custom-inner"></span>
      </span>
      <div class="md-radio__label-text">
        Single site license
        <!-- <small class="md-radio__add-text">Price: 79$USD</small> -->
      </div>
    </label>
    <label for="radItem2" class="md-radio has--add-text">
      <input type="radio" id="radItem2" name="radItem[]" class="md-radio__input">
      <span class="md-radio__custom">
        <span class="md-radio__custom-inner"></span>
      </span>
      <div class="md-radio__label-text">
        5 Site License
        <!-- <small class="md-radio__add-text">Price: 99$USD</small> -->
      </div>
    </label>
    <label for="radItem3" class="md-radio has--add-text">
      <input type="radio" id="radItem3" name="radItem[]" class="md-radio__input">
      <span class="md-radio__custom">
        <span class="md-radio__custom-inner"></span>
      </span>
      <div class="md-radio__label-text">
        Developers License
        <!-- <small class="md-radio__add-text">Price: 499$USD</small> -->
      </div>
    </label>
  </div><!-- prodlicen -->
  <div class="text_align">
    <h3 class="price license_price themecolor">€79</h3>
  </div>
</div><!-- prodprice -->
.prodprice {
  display: flex;
  justify-content: space-between;
}
.product:first-child {
  flex-basis: calc(100% - 70px - 30px);
}
.prodprice:nth-child(2) {
  flex-basis: 70px;
}
.prodlicen {
    display: flex;
    flex-wrap: wrap;
}
/* .md-radio {
  position: relative;
  display: inline-block;
  font-size: 20px;
  line-height: 46px;
  cursor: pointer;
} */
.md-radio {
    /* position: relative; */
    display: flex;
    flex-basis: 200px;
    flex-grow:1;
    font-size: 20px;
    line-height: 46px;
    cursor: pointer;
}
.md-radio:hover .md-radio__custom-inner {
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
  opacity: 0.5;
}
.md-radio__input {
  display: none;
  /* width: 1px;
  height: 1px;
  border: none;
  -webkit-transition: none;
  transition: none;
  opacity: 0; */
}
.md-radio__input:checked + .md-radio__custom {
  border-color: #F16334;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.md-radio__input:checked + .md-radio__custom .md-radio__custom-inner {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}
.md-radio__input:focus + .md-radio__custom .md-radio__custom-inner {
  background-color: #F16334;
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}
.md-radio__custom {
  /* position: relative; */
  display: flex;
  /* float: left; */
  /* clear: left; */
  box-sizing: initial;
  margin: 8px;
  width: 24px;
  height: 24px;
  background-color: #fff;
  border: 3px solid #cccccc;
  border-radius: 50%;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  -webkit-transform: scale(0.75);
          transform: scale(0.75);
}
.md-radio__custom-inner {
  width: 16px;
  height: 16px;
  display: block;
  margin: 4px;
  background-color: #F16334;
  border-radius: 50%;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  -webkit-transform: scale(0);
          transform: scale(0);
  opacity: 0;
}
.md-radio__label-text {
  display: inline-block;
  /* line-height: 1.125; */
}
/* .md-radio.has--add-text .md-radio__label-text {
  padding-top: 7px;
} */
.md-radio.has--add-text .md-radio__add-text {
  display: block;
  padding-top: 2px;
  color: #5b5b5b;
  line-height: 1;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.