Radio button with tabs - wrong solution, good solution another fiddle

wrong solution, good solution another fiddle

by Zsanett Tamás

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container pb-5">
  <div class="form-group mb-0 pt-5">
    <h4 class="text-uppercase dark-purple-text pt-5"><strong>Válassza ki a kívánt kalkulátort!</strong></h4>
    <ul class="ml-0 mb-5 mt-3 nav" id="calculatorTabs" role="tablist">
      <li class="custom-control custom-radio custom-control-inline mr-5 active">
        <a href="#calcPanel-A" class="active" data-toggle="tab" role="tab">
          <input type="radio" class="custom-control-input" id="vat" name="calc" checked>
          <label class="custom-control-label pointer-event pr-1 dark-purple-text text-uppercase"
           for="vat"><strong>Bruttó</strong></label>
        </a>
      </li>
      <li class="custom-control custom-radio custom-control-inline">
        <a class="" href="#calcPanel-B" data-toggle="tab" role="tab">
           <input type="radio" class="custom-control-input" id="net" name="calc">
           <label class="custom-control-label dark-purple-text text-uppercase"
            for="net"><strong>Nettó</strong></label>
         </a>
      </li>
    </ul>
  </div>
  <div id="calcContent" class="tab-content" role="tablist">
    <div id="calcPanel-A" class="tab-pane fade show active" role="tabpanel" aria-labelledby="calcPanel-A">
      <div class="row mt-5">
        <div class="col-12">
          <div class="calc-card card">
            <div class="card-header">
              <div class="row">
                <div class="col-12 col-md-6">
                  <h4 class="text-center"><strong>Megnevezés</strong></h4>
                </div>
                <div class="col-12 col-md-3">
                  <h4 class="text-center"><strong>Értékek</strong></h4>
                </div>
                <div class="col-12 col-md-3">
                  <h4...

SCSS

$link: #563d7c;
$bg-container: #ddd;
$bg-header: #25baed;
$bg-card: #fff;
$card-color: #000;

.container {
  background-color: $bg-container;
  a {
    color: $link;
  }
  .calc-card.card {
    .card-header {
      background-color: $bg-header;
    }
    background-color: $bg-card;
    color: $card-color;
  }
}