JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td>
            Normal Content
        </td>
        <td>
            Normal Content
        </td>
        <td>
            Normal Content
        </td>
    </tr>
    <tr>
        <td>
            Normal Content
        </td>
        <td class="more-content">
            <span>
                Some really large content, mussum ipsum cacilds, vidis litro abertis.
            </span>
        </td>
        <td>
            Normal Content
        </td>
    </tr>
</table>

CSS

* {
    margin:0;
    padding:0;
}
table, td{
    border:1px solid black;
    border-collapse:collapse;
}
td{
    width:8em;
    height:1.5em;
}
td.more-content:hover{
    position:relative;
    top:-0.6em;
   /* position:relative;
    line-height:1em;
    overflow:visible;
    z-index:0;
    height:1.5em !important;*/
}
td.more-content:after {
    content: "";
    position: relative;
    right:.7em;
    top:.6em;
    border-left: .7em solid transparent;
    border-top: .7em solid red;
}
td.more-content:hover:after{
    display:none;
}
td.more-content span{
    display:inline-block;
    text-overflow:ellipsis;
    white-space:no-wrap;
    overflow:hidden;
    height:1em;
    margin:0;
}
td.more-content:hover > span
{
    float:left;
    width:20em;
    overflow:visible;
    background:yellow;
    position:fixed;
    clear:both;
    height:20em;
    z-index:10;
    line-height:1em;
}