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 {
  transition: max-height 1s ease;
  overflow: hidden;
  max-height: 100vh;
}

#slide.slide-toggle {
 max-height: 0;
}

JavaScript

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