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">
        <div>
        <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>
            
    <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"><p>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.</p></div>
</section>

CSS

.info{
        display: table;
        width: 100%;
    }
    .title{
        display: table-cell;
        width: 45%;
        min-width: 45%;
        max-width: 45%;
    }
    .data{
        display: table-cell;
        width: 25%;
        min-width: 25%;
        text-align:right;
    }
    .actions{
        display: table-cell;
        width: 30%;
        min-width: 30%;
        text-align:right;
    }
    .helpText{ width: 100%; }

JavaScript

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

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