Как сверстать эту форму покупки товара?

const oLicense = document.querySelector('.license');
const oNumOfLic = oLicense.querySelector('select');
const oTotalSum = oLicense.querySelector('.license__content--total span');
const oLicenseBuy = oLicense.querySelector('.license__buy');
const oLicenseSel = oLicense.querySelector('.license__selected span');

function fCalculate() {
  let oChoosePlan = document.querySelector('input[type="radio"]:checked');
  oTotalSum.textContent = oChoosePlan.value * oNumOfLic.value;
  oLicenseSel.textContent = oChoosePlan.closest('.license__item').querySelector('p').textContent;
}

oLicense.addEventListener('change', fCalculate);

fCalculate();

@import url("https://fonts.googleapis.com/css2?family=Teko:wght@400;500&display=swap");

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #333;
}

.license {
  height: 605px;
  width: 100%;
  max-width: 590px;
  padding: 30px;
  box-sizing: border-box;
  color: #787878;
  background-color: #f8f8f8;
  box-shadow: inset 0 0 0 12px #ebebeb;
}

.license__item {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
  padding: 20px 15px 19px 25px;
  box-sizing: border-box;
  cursor: pointer;
}

.license__item:hover {
  background-color: #ebf4f7;
  box-shadow: inset 0 0 0 1px #b8d7e2;
}

.license__item input {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  height: 1px;
  width: 1px;
}

.license__item .license__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.license__item .license__content span {
  height: 34px;
  width: 34px;
  background-image: radial-gradient( circle, #0000 11px, #dadada 12px 16px, #0000 17px);
}

.license__item input:checked+.license__content span {
  background-image: radial-gradient( circle, #0294bf 6px, #0000 7px 11px, #34648e 12px 16px, #0000 17px);
}

.license__item .license__content p {
  margin: 5px 18px 0;
  font: 26px/1em "Teko", sans-serif;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.license__item .license__price {
  font: 16px/1em sans-serif;
  letter-spacing: 1px;
}

.license__quantity {
  margin: 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px;
  font: 14px sans-serif;
  color: #000;
  box-shadow: inset 0 -1px 0 0 #cccccc, inset 0 1px 0 0 #cccccc;
}

.license__quantity p { margin: 0 10px 0 0; }

.license__quantity select { padding: 5px 0; }

.license__footer { text-align: center; }

.license__footer .license__content.license__content--total {
  margin-top: 37px;
  display: flex;
  justify-content: center;
  font: 30px/1em "Teko", sans-serif;
  font-weight: 500;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

.license__footer .license__content p { margin: 0; }

.license__footer .license__content span { color: #3388a8; }

.license__footer .license__content span::before { content: "$"; }

.license__footer .license__content span::after {
  content: "US";
  position: relative;
  bottom: 0.5em;
  font: 16px/1em "Teko", sans-serif;
}

.license__footer .license__buy {
  margin-top: 13px;
  display: inline-block;
  padding: 16px 62px;
  border-radius: 30px;
  font: 14px/1em "Babes", sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background-color: #33a845;
}

.license__footer .license__selected {
  margin-top: 50px;
  font: 18px sans-serif;
  letter-spacing: 1.5px;
  color: #3388a8;
}

<div class="license">

  <label class="license__item">
    <input type="radio" name="plan" value="13" checked>
    <div class="license__content">
      <span></span>
      <p>License plan #1</p>
    </div>
    <div class="license__price">$13 per license</div>
  </label>
  <label class="license__item">
    <input type="radio" name="plan" value="22">
    <div class="license__content">
      <span></span>
      <p>License plan #2</p>
    </div>
    <div class="license__price">$22 per license</div>
  </label>
  <label class="license__item">
    <input type="radio" name="plan" value="34">
    <div class="license__content">
      <span></span>
      <p>License plan #3</p>
    </div>
    <div class="license__price">$34 per license</div>
  </label>

  <div class="license__quantity">
    <p>Number of licenses:</p>
    <select>
      <option value="10">10</option>
      <option value="30">30</option>
      <option value="50">50</option>
      <option value="1000">1000</option>
    </select>
  </div>

  <div class="license__footer">
    <div class="license__content license__content--total">
      <p>Total:&nbsp;</p>
      <span>0</span>
    </div>
    <a href="#" target="_blank" class="license__buy">Buy now</a>
    <div class="license__selected">
      Selected plan: <span>---</span>
    </div>
  </div>
  
</div>