JSFiddle - React, Tailwind, and code Playground

HTML

<div class="collapse">
  <button id="btn"> Click Me </button>
  <div class="collapse-wrapper">
      <div class="collapse-content">
     Lorem ipsum dolor, sit amet consectetur adipisicing elit. Mollitia ut explicabo nesciunt minima pariatur saepe eveniet officia ducimus perferendis suscipit?
  </div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

.collapse-wrapper {
  overflow: hidden;
  transition: height 300ms ease-in;
}

JavaScript

const wrapper = document.querySelector('.collapse-wrapper')
const content = document.querySelector('.collapse-content')
const button = document.getElementById('btn')
let open = true

// Set initial height to content height, if shown by default
if (open) {
	wrapper.style.height = `${content.getBoundingClientRect().height}px`
}

function toggleOpen () {
	if (open) {
	  wrapper.style.height = '0px'
  	open = false
  } else {
		const height = content.getBoundingClientRect().height
  	wrapper.style.height = `${height}px`;
  	open = true
  }
}

button.addEventListener('click', toggleOpen)