JSFiddle - React, Tailwind, and code Playground

HTML

<table height="100%" cellspacing="0" class="container">
    <tr class="row">
        <td class="left">
        </td>
        <td class="center"></td>
        <td rowspan="3" height="100%" class="right">
            <table cellspacing="0" height="100%">
                <tr>
                    <td>
                        <div class="right-top"></div>
                    </td>
                </tr>
                <tr>
                    <td class="right-body">
                        test text
                        test text
                        test text
                        test text
                        test text  
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="right-bot"></div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

CSS

table
{
    border-collapse: collapse;
}

td
{
    margin:0;
    padding:0;
}

.container{
    display:table;
}
.row{
    display:table-row;
}
.left, .center, .right{
    display: table-cell;
    width: 100px;
    vertical-align:top;
}
.left, .center{
    border:1px solid #ccc;
    height:100px;
}
.right-top, .right-bot{
    height:20px;
    width: 20px;
}
.right-body{
    width: 100px;
    height:100%;
    background:#fac;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.right-top{
    background:#acf;
}
.right-bot{
    background:#afc;
}