JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container"><div><div>Title</div><div>description<br>bla bla bla</div></div><div><div>Title</div><div>description</div></div><div><div>Title</div><div>description<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla<br>bla bla bla</div></div><div><div>Title</div><div>description</div></div><div><div>Title</div><div>description</div></div><div><div>Title</div><div>description</div></div><div><div>Title</div><div>description</div></div></div>

CSS

#container>div{
 width:512px;height:48px;overflow:hidden;
 -webkit-transition:all 300ms ease;
 background-color:rgba(0,0,0,0.5);
}
#container>div>div:nth-child(1){
 line-height:48px;text-align:center;
 background-color:rgba(0,0,0,0.5);
}

JavaScript

function h(e){
 var p='parentNode',a=e.target,b=a[p],f=48,u='px',y=b[p];
 !y.c||(y.c==b||(y.c.style.height=f+u,y.c.x=f)),y.c=y.c==b?null:b,a!=b.firstChild||(b.x=b.x>f?f:(f+b.childNodes[1].offsetHeight),b.style.height=b.x+u)
}
document.getElementById('container').addEventListener('click',h,false);