<form>
  <div>
    <label>
      <input type="radio" name="plan" checked>
      <span class="plan-details">
        <span class="plan-name">Basic</span>
        <span class="plan-cost">$0/month</span>
        <span>1 team member</span>
        <span>100 GB/month</span>
        <span>1 concurrent build</span>
      </span>
    </label>
  </div>
  <div>
    <label>
      <input type="radio" name="plan">
      <span class="plan-details">
        <span class="plan-name">Pro</span>
        <span class="plan-cost">$50/month</span>
        <span>5 team members</span>
        <span>500 GB/month</span>
        <span>5 concurrent builds</span>
      </span>
    </label>
  </div>
  <div>
    <label>
      <input type="radio" name="plan">
      <span class="plan-details">
        <span class="plan-name">Business</span>
        <span class="plan-cost">$200/month</span>
        <span>5+ team members</span>
        <span>1000 GB/month</span>
        <span>Unlimited builds</span>
      </span>
    </label>
  </div>
</form>
body {
  background-color: #f2f8ff;
  color: #263238;
  font-family: 'Noto Sans', sans-serif;
}

div + div {
  padding-top: 1em;
}

label, input {
  cursor: pointer;
}

.plan-details {
  display: inline-flex;
  flex-direction: column;
}

.plan-name {
  color: #1B68C7;
  font-size: 1.2em;
  font-weight: bold;
}

.plan-cost {
  font-weight: bold;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.