JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.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;
}