JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1" id="main">
    <tbody>
        <tr style="height: 80px;">
            <td colspan="2">
                some text
            </td>
        </tr>
    
    
        <tr>
            <td style="width: 135px;">some other text</td>
            <td><div class="popup"></div>The container with<br>text under<br>the popup<br>The container with<br>text under<br>the popup<br>The container with<br>text under<br>the popup<br>The container with<br>text under<br>the popup<br></td>
        </tr>

        <tr style="height: 14px;">
            <td colspan="2" style="text-align: right; vertical-align: bottom;">some text</td>
        </tr>



     
    </tbody>
    </table>

CSS

table {
    border-style: dotted;
    border-width: 1px;
    empty-cells:show;
}

#main {
    width: 100%;
    height: 100%;
    font-size: 12px;
}

#main td{
     vertical-align: top;
}

div.popup {
    height: 95%;
    width: 95%;
    border-color: #d3d7cf;
    border-width: 2px;
    border-style: solid;
    border-radius: 10px;
    background-color: #f3f3f3;
    z-index: 1;
}