JSFiddle - React, Tailwind, and code Playground

HTML

<section class="summary">
    <div class="info">
        <div class="title"><span class="clickableTitle">A title</span></div>
        <div class="data">Some Data</div>
        <div class="actions"><a href="http://google.com">A link</a></div>
    </div>
    <div class="helpText">
        <strong>A bold help title</strong>
        <ul>
            <li>A list item with exceptionally long text, which is wherein we discover our problem</li>
            <li>Some other list item</li>
        </ul>
    </div>
            
    <div class="info">
        <div class="title"><span class="clickableTitle">Another title</span></div>
        <div class="data">Some other Data</div>
        <div class="actions"><a href="http://google.com">A link</a></div>
    </div>
    <div class="helpText">This div just has some straight text in it. The text goes on a bit, which will also cause the problem, regardless of whether I wrap it in a p tag or any similar wrapping markup.</div>
</section>

CSS

.summary {
    width: 100%;
    display: table;
    table-layout: fixed;
}
.info{
    display: table-row;
    width: 100%;
    min-width: 100%;
    table-layout: fixed;
}
.title{
    display: table-cell;
    width: 45%;
    min-width: 45%;
    max-width: 45%;
    table-layout: fixed;
}
.data{
    display: table-cell;
    width: 25%;
    min-width: 25%;
    text-align:right;
    table-layout: fixed;
}
.actions{
    display: table-cell;
    width: 30%;
    min-width: 30%;
    text-align:right;
    table-layout: fixed;
}
.helpText{
    margin-top: 0px;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    display: table-row;
    table-layout: auto;
    margin-bottom: 50px;
}

JavaScript

$(function() {
	$(".clickableTitle").click(function() {
		hideHelpText(this)
    });
});

function hideHelpText(helpTitle) {
	var parentSection = $(helpTitle).closest('.info');
	var helpText = parentSection.next('.helpText');
	helpText.toggle();
}