JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <table border="1">
        <tr>
            <td><div>This is a test.</div></td>
            <td><div>This is a td with line breaks in the text.</div></td>
            <td><div>This is a test.</div></td>
        </tr>
    </table>
</div>

CSS

#container {
    width:500px;
}
table { 
    width:100%;
    table-layout:fixed; 
}
table tr { 
    height:1em;  
}
td {
    word-break: break-word;  
}

JavaScript

var $tds = $('td div');

$tds.each(function(){
    
    alert($(this).height())
    
});