JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1">
<tr class="fixedRow">
    <td class="fixedCell">
        a<br>
        b<br>
        c<br>
        d<br>
        e<br>
        f<br>
        g<br>
        h<br>
        i<br>
        j<br>
        k<br>
        l<br>
        m<br>
        n<br>
        o<br>
        p<br>
        q<br>
        rowwwwwwwwwwww why isn't this 50px tall??
    </td>
    <td class="fixedCell">
        When in the Course of human events it becomes necessary for one people to dissolve the political bands which have connected them with another and to assume among the powers of the earth, the separate and equal station to which the Laws of Nature and of Nature's God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation.
    </td>
</tr>
    <tr>
        <td>Untouched row</td>
        <td>This rows height should be auto, depending on how much content it has</td>
    </tr>
</table>

CSS

tr.fixedRow,
tr.fixedRow td.fixedCell
{
    height: 50px;
    min-height:50px;
    max-height:50px;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
}


/* failed attempts:             */

/* table{ table-layout: fixed; } */
/* table{ table-layout: auto; }  */
/* tr { display:block;}          */
/* table { display:block;}       */
/* table {  overflow:hidden; }   */