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
.summary {
width: 100%;
display: table;
table-layout: initial;
}
.info{
display: table-row;
width: 100%;
min-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{
margin-top: 0px;
width: 100%;
min-width: 100%;
max-width: 100%;
display: table-row;
margin-bottom: 50px;
}
.helpText > * {display: table-cell; width: 100%}
JavaScript
$(function() {
$(".clickableTitle").click(function() {
hideHelpText(this)
});
});
function hideHelpText(helpTitle) {
var parentSection = $(helpTitle).closest('.info');
var helpText = parentSection.next('.helpText');
helpText.toggle();
}