<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <scetion class="custom-radio ptb-80"> <div class="container"> <div class="title mb-4">Choose Your Plan</div> <div class="plans"> <label class="plan basic-plan" for="basic"> <input type="radio" name="plan" id="basic" /> <div class="plan-content"> <img loading="lazy" src="https://raw.githubusercontent.com/ismailvtl/ismailvtl.github.io/master/images/life-saver-img.svg" alt="" /> <div class="plan-details"> <span>Basic</span> <p> For smaller business, with simple salaries and pay schedules. </p> </div> </div> </label> <label class="plan complete-plan" for="complete"> <input type="radio" id="complete" name="plan" /> <div class="plan-content"> <img loading="lazy" src="https://raw.githubusercontent.com/ismailvtl/ismailvtl.github.io/master/images/potted-plant-img.svg" alt="" /> <div class="plan-details"> <span>Complete</span> <p> For growing business who wants to create a rewarding place to work. </p> </div> </div> </label> </div> </div> </scetion>

.plans { display: flex; justify-content: space-between; flex-wrap: wrap; } .plans label { width: 481px; display: inline-block; } .plans label input[type="radio"] { opacity: 0; position: absolute; } .plan-content { border-radius: 12px; display: flex; justify-content: space-between; padding: 25px; box-shadow: 2px 2px 8px rgb(0 0 0 / 20%); border: 2px solid #bcc6fa; } .plan-content img { width: 55px; margin-right: 25px; } .plans label input[type="radio"]:checked + .plan-content { background-color: rgb(203, 249, 255); border-color: #000; box-shadow: unset; } .ptb--80 { padding: 80px 0; }