аккордеон на дисплее: гибкие предметы

Question

Я пытаюсь найти решение проблемы, когда у меня есть 3 элемента, выровненные в ряд, используя display: flex на экране рабочего стола. Каждый из этих предметов имеет аккордеон, который отлично работает и открывается, НО другие элементы также отображают высоту открытого аккордеона. Есть ли другое решение вместо моего, где открытый предмет будет расширяться, а два других останутся, когда они закрыты?

html:
<div class="section-3">
    <div class="section-3-container">
      <div class="card-deck">
        <div class="card">
          <img src="images/firstplant.svg" class="card-img-top">

          <div class="card-body upper-body">
            <p class="text">Esmane nõustamine</p>

            <br>

            <li>Olukorra kaardistamine</li>
            <br>
            <li>Toidupäeviku analüüs</li>
            <br>
            <li>Eesmärkide püstitamine</li>
            <br>
            <li>Teenuse maksumus 50€</li>
            <br>


            <button class="btn-secondary" href="kontakt.php">
              <a href="kontakt.php" class="btn-text"> Broneeri aeg</a>
            </button>
          </div>

          <div class="card-body">
            <button class="card-link">Loe lisaks</button>
            <div class="card-link-display">
              <div class="H4"> Teenus sisaldab:</div>


              <ul>
                <li>
                  hetkeolukorra kaardistamine;
                </li>

                <li>
                  eesmärkide püstitamine;
                </li>

                <li>
                  personaalse tegevuskava koostamine;
                </li>

                <li>
                  soovi korral kehakoostise määramine bioelektrilise impedantsi analüüsi meetodil
                  (mõõtmistulemused näitavad lisaks kehakaalule rasvaprotsendi, lihasmassi jpm, samuti
                  vistseraalse rasvumise väärtuse ning metaboolse vanuse);
                </li>

                <li>
                  3-5 päeva toidupäeviku analüüsi teostamine makro- ja mikrotoitainete saamise
                  tasakaalust;
                </li>

                <li>
                  soovituste andmist menüü muutmiseks tervisele soodsas suunas.
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="card">
          <img src="images/secondplant.svg" class="card-img-top" alt="...">
          <div class="card-body">
            <p class="text">Korduv nõustamine</p>

            <br>

            <li>Muutuste hindamine</li>
            <br>
            <li>Tegevuskava korrigeerimine</li>
            <br>
            <li>Eesmärkide püstitamine</li>
            <br>
            <li>Teenuse maksumus 40€</li>
            <br>

            <button class="btn-secondary" href="kontakt.php">
              <a href="kontakt.php" class="btn-text"> Broneeri aeg</a>
            </button>

          </div>

          <div class="card-body">
            <button class="card-link">Loe lisaks</button>
            <div class="card-link-display">
              <div class="H4"> Teenus sisaldab:</div>


              <ul>
                <li>
                  eelneval korral kokkulepitud tegevuste ja kehakoostianalüüsi muutuste hindamine
                  näitajates;
                </li>

                <li>
                  toitumis- ja tegevuskava korrigeerimine;
                </li>

                <li>
                  kokkulepete sõlmimine edaspidiseks tegevuseks. </li>


              </ul>
            </div>

          </div>
        </div>
        <div class="card">
          <img src="images/thirdplant.svg" class="card-img-top" alt="...">
          <div class="card-body">
            <p class="text">Konsultatsioon</p>

            <br>

            <li>Lisainformatsiooni saamine</li>
            <br>
            <li>Nõupidamine küsimuste korral</li>
            <br>
            <li>Teenuse maksumus 30€</li>
            <br>
            <br>
            <br>
            <br>

            <button class="btn-secondary" href="kontakt.php">
              <a href="kontakt.php" class="btn-text"> Broneeri aeg</a>
            </button>
          </div>
          <div class="card-body">
            <button class="card-link">Loe lisaks</button>
            <div class="card-link-display">
              <div class="H4"> Teenus sisaldab:</div>


              <ul>
                <li>
                  nõupidamine kiirete küsimuste korral või lisainformatsiooni saamine personaalse
                  tegevuskava erinevate võimalike lahenduste kohta.
                </li>




              </ul>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>

css:
.section-3 {
    width: 100%;
    height: 100%;
    padding-top: 20px;
}

.section-3-container {
    width: 100%;
    height: 100%;
    padding: 0 20px;
    margin: 0 auto;
    max-width: 1100px;
}

.card-deck {
    display: flex;
    flex-flow: row wrap;
    position: relative;
    width: 100%;
    height: 100%;
    justify-content: center;
}

.card {
    border: 1px solid #dddddd;
    flex-direction: column;
    margin-right: 15px;
    margin-bottom: 0;
    margin-left: 15px;
    position: relative;
    max-width: 320px;
    overflow: hidden;
    min-width: 0px;
    flex: 1 1 0%;
    text-align: center;
    align-items: center;
    display: flex;
    transition-duration: 0.4s;
}

.card, .card-img, .card-img-top {
    border-top-left-radius: calc(0.25rem - 1px);
    border-top-right-radius: calc(0.25rem - 1px);
    border-radius: 10px;
}

.card-img-top {
    width: 100%;
}

.card-body {
    min-height: 1px;
    padding: 1.25rem;
    width: 100%;
}

.text {
    font-family: Lora;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 25px;
    letter-spacing: 0.75px;
    color: #000000;
}

.btn-secondary {
    background-color: #f5942e;
    width: 220px;
    height: 54px;
    border-radius: 50px;
    align-items: center;
    text-align: center;
    border: none;
    cursor: pointer;
}

.btn-text {
    font-family: "Raleway";
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 16px;
    letter-spacing: 0.02em;
    color: #ffffff;
    text-decoration: none;
    position: relative;
}

js:

  var cardLink = document.getElementsByClassName("card-link");
  var i;

  for (i = 0; i < cardLink.length; i++) {
    cardLink[i].addEventListener("click", function () {

      this.classList.toggle("active");


      var cardLinkDisplay = this.nextElementSibling;
      if (cardLinkDisplay.style.display === "block") {
        cardLinkDisplay.style.display = "none";
      } else {
        cardLinkDisplay.style.display = "block";
      }
    });
  }