My jQuery collapsible is not resizing properly to fit the expanded content. Below is an example of the collapsible structure:
<div class="row collapsibles" data-role="collapsible">
<h1>Supercategory A</h1>
<div class="col-xs-7 txt">A1</div><div class="col-xs-5"><button class="btn">Go</button></div>
<div class="col-xs-7 txt">A2</div><div class="col-xs-5"><button class="btn">Go</button></div>
</div>To see the issue, you can visit: https://jsfiddle.net/pseudobison/xd6oejzz/18/. After expanding the collapsible, notice that the rounded corner at the bottom is misaligned.
I have attempted to set the height property and adjust the outer div's content, but I only managed to fix it temporarily by adding br tags. What is the correct way to address this issue?