<div class="accordion">
  <div>
    <button id="button">click me!</button>
  </div>
  <div>
    <p>
      Hello,<br>
      interplate-size<br>
      and<br>
      calc-size()!<br><br>
      this is invisible text
    </p>
  </div>
</div>

:root {
  interpolate-size: allow-keywords;
}

.accordion {
  border: solid 1px #ccc;
  overflow: hidden;
  height: 28px;
}

.transition {
  transition: height 2s ease;
  height: calc-size(auto, size - 50px);
}

const button = document.querySelector("#button");

button.addEventListener("click", () =>{
  const accordion = document.querySelector(".accordion");
  accordion.classList.add("transition");
})