Nested Accordian: дочерние элементы, открывающиеся за родительскими элементами

Question

Как мне собрать все элементы в стек, не отставая друг от друга? Как вы можете видеть в этом примере, элементы родственного элемента корректируются так, как должны, но при нажатии на вложенный элемент его следующий родительский элемент не перемещается вниз. Дочерний элемент просто отстает от него.

https://codepen.io/lgehrig4/pen/vYObyZq

      <button class="accordion">About Me</button>
      <div class="panel">
        <p>Lorem ipsum...</p>
      </div>

      <button class="accordion">Resume</button>
      <div class="panel">

        <button class="accordion">Profile</button>
        <div class="panel">
          <p>lorem...</p>
        </div>

        <button class="accordion">Professional Experience</button>
        <div class="panel">
          <button class="accordion">Job 1</button>
          <div class="panel">
            <p>Lorem...</p>
          </div>
          <button class="accordion">Job 2</button>
          <div class="panel">
            <p>Lorem...</p>
          </div>
          <button class="accordion">Job 3</button>
          <div class="panel">
            <p>Lorem...</p>
          </div>
          <button class="accordion">Job 4</button>
          <div class="panel">
            <p>Lorem...</p>
          </div>
        </div>

        <button class="accordion">Technical Skills</button>
        <div class="panel">
          <p>Lorem...</p>
        </div>

        <button class="accordion">Education and Certification</button>
        <div class="panel">
          <p>Lorem...</p>
        </div>
      </div>

      <button class="accordion">Projects</button>
      <div class="panel">
        <p>Lorem ipsum...</p>
      </div>

      <button class="accordion">Contact</button>
      <div class="panel">
        <p>Lorem ipsum...</p>
      </div>
    </main>
  </div>

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc;
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.accordion:after {
  content: '\02795'; 
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796"; 
}

const accordian = document.querySelectorAll(".accordion")
let i

for (i = 0; i < accordian.length; i++) {
  accordian[i].addEventListener("click", function () {
    this.classList.toggle("active")
    const panel = this.nextElementSibling

    if (panel.style.maxHeight) {
      panel.style.maxHeight = null
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px"

    }
  })
}

ps Я делаю это в node.js, но я не думаю, что это имеет значение