JSFiddle - React, Tailwind, and code Playground

HTML

<button id="toggle">slideToggle</button>
<div id="slide" class="slide-toggle">
Допустим есть два блока, один над другим, внутри первого есть слайд - жмёшь на блок, слайд раскрывается - что происходит со вторым блоком? Слайд перекрывает второй блок? - вполне вероятно, что всех это устроит меня вот устраивает, а если нет? Пропишешь высоту в css? - как?захардкодишь? Так себе вариант. Задашь максимальную высоту? - задержка будет. Или есть какая-то css магия, которую я не смог нагуглить?
</div>

<div>
Допустим есть два блока, один над другим, внутри первого есть слайд - жмёшь на блок, слайд раскрывается - что происходит со вторым блоком? Слайд перекрывает второй блок? - вполне вероятно, что всех это устроит меня вот устраивает, а если нет? Пропишешь высоту в css? - как?захардкодишь? Так себе вариант. Задашь максимальную высоту? - задержка будет. Или есть какая-то css магия, которую я не смог нагуглить?
</div>

CSS

div {
  background: #aaa;
  margin: 5px;
}

#slide {
  transform: scaleY(1);  
  transform-origin: top;
  transition: transform 0.26s ease;
}

#slide.slide-toggle {
 transform: scaleY(0); 
}

JavaScript

slideToggle = () => slide
		.classList.toggle('slide-toggle')
toggle.addEventListener('click', slideToggle)