Как сверстать данные кнопки?

.button-radio{ 
    padding: 15px 25px; 
} 
 
.radio { 
    position: absolute; 
    z-index: -1; 
    opacity: 0; 
    margin: 10px 0 0 7px; 
} 
.radio + label { 
    position: relative; 
    width: 300px; 
    padding: 0 0 0 55px; 
    /* margin: 15px 25px; */ 
    cursor: pointer; 
    display: inline-block; 
    line-height: 3; 
    border-radius: 25px; 
    border: 1px solid; 
} 
.radio + label:before { 
    content: ''; 
    position: absolute; 
    top: 14px; 
    left: 15px; 
    width: 22px; 
    height: 22px; 
    border: 1px solid #CDD1DA; 
    border-radius: 50%; 
    background: #FFF; 
} 
.radio + label:after { 
    content: ''; 
    position: absolute; 
    top: 18px; 
    left: 19px; 
    width: 16px; 
    height: 16px; 
    border-radius: 50%; 
    background: #9FD468; 
    box-shadow: inset 0 1px 1px rgba(0,0,0,.5); 
    opacity: 0; 
    transition: .2s; 
} 
 
.radio:checked + label{ 
    background: #0f74a8; 
    color: #fff; 
} 
 
.radio:checked + label:after { 
    opacity: 1; 
} 
.radio:focus + label:before { 
    box-shadow: 0 0 0 3px rgba(255,255,0,.7); 
}

<div class="button-radio"> 
    <input type="radio" class="radio" id="radio" /> 
    <label for="radio">А я переключаю радиокнопку</label> 
</div>