How to vertically align the point .radio + label:before , no matter how much it will be after the text codepen
.button-radio{ padding: 15px 25px; } .radio { position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 7px; } .button-radio label p { margin-top: 0; margin-bottom: 15px; } .button-radio label p:last-child { margin-bottom: 0; margin-top: 0; } .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" name="group1" /> <label for="radio"> <p> radiobtn1 </p> </label> </div> <div class="button-radio"> <input type="radio" class="radio" id="radio2" name="group1" /> <label for="radio2"> <p> radiobtn2 </p> <p> radiobtn2 </p> </label> </div> 
