JSFiddle - React, Tailwind, and code Playground

HTML

<slide-toggle class="box collapse">
  <div class="toggle">Click</div>
  <div class="container">I have an accordion and am animating the the height for a show reveal - the issue is the height which i need to set to auto as the information is different lengths.<br><br>
  I have an accordion and am animating the the height fferent lengths.
  </div>
</slide-toggle>

<slide-toggle class="box collapse">
  <div class="toggle">Click</div>
  <div class="container">I have an accordion and am animating the the height for a show reveal - the issue is the height which i need to set to auto as the information is different lengths.<br><br>
  I have an accordion and am animating the the height fferent lengths.
  </div>
</slide-toggle>

<slide-toggle class="box collapse">
  <div class="toggle">Click</div>
  <div class="container">I have an accordion and am animating the the height for a show reveal - the issue is the height which i need to set to auto as the information is different lengths.<br><br>
  I have an accordion and am animating the the height fferent lengths.I have an accordion and am animating the the height for a show reveal - the issue is the height which i need to set to auto as the information is different lengths.<br><br>
  I have an accordion and am animating the the height fferent lengths.I have an accordion and am animating the the height for a show reveal - the issue is the height which i need to set to auto as the information is different lengths.<br><br>
  I have an accordion and am animating the the height fferent lengths.
  </div>
</slide-toggle>

CSS

.box {
  width: 300px;
  display: block;
  border: 1px solid #000;
  margin: 10px;
  overflow: hidden;
  cursor: pointer;
  max-height: calc(var(--y) + var(--x));
  transition: max-height 0.5s;
}

.collapse {
  max-height: var(--x);
}

JavaScript

customElements.define('slide-toggle', class extends HTMLElement {

	connectedCallback(){
  	this.style.setProperty('--x',
    	this.querySelector('.toggle')
    		.getBoundingClientRect().height + 'px')
  	this.style.setProperty('--y',
    	this.querySelector('.container')
    		.getBoundingClientRect().height + 'px')
     this.querySelector('.toggle')
     		.addEventListener('click', 
     			e => this.classList.toggle('collapse'))
  }

})