JSFiddle - React, Tailwind, and code Playground

HTML

<div class='wrapperAccordion'>
<div id='accordion'>
    
    <h3>Header 1</h3>
    <div>This is <a href="#">paragraph one</a>.</div>
    
    <h3>Header 2</h3>
    <div>This is <a href="#">paragraph two</a>.</div>
    
    <h3>Header 3</h3>
    <div>This is paragraph three. There is more text in here than the other panels which should make it have a larger height. Perhaps I've done something wrong with the code, because 'auto' doesn't seem to be doing anything for my local copy.</div>
</div>
</div>

CSS

/*
These are only problems with the heightStyle: 'auto' setting on an accordion. If you change it to
heightStyle: 'content', the problems go away.
*/

/* this causes the height of each accordion tab to be miscalculated */
.wrapperAccordion {
    width: 300px;
}
/* this causes a nasty "snap" when an accordion tab is shown */
* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

JavaScript

$('#accordion').accordion({
    heightStyle: 'auto'
});