JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="row">
        <div class="left">
            test text
            test text
            test text
            test text
            test text
            test text
            test text
            test text
            test text
            test text
            test text
            test text
            test text
            test text
            test text  
        </div>
        <div class="center"></div>
        <div class="right">
            <div class="right-row">
                <div class="right-cell">
                    <div class="right-top"></div>
                </div>
            </div>
            <div class="right-row">
                <div class="right-body">
                    test text
                    test text
                    test text
                    test text
                    test text  
                </div>
            </div>
            <div class="right-row">
                <div class="right-cell">
                    <div class="right-bot"></div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

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