JSFiddle - React, Tailwind, and code Playground

by sujay

HTML

<div class="min-cont">
    <div class="col">
        <div class="pane"></div>
    </div>
    <div class="col">
        <div class="pane" style="height: 50%"></div>
        <div class="pane" style="height: 50%"></div>
    </div>
</div>

CSS

* {
    box-sizing: border-box;
}
.min-cont {
    height: 97.5vh;
    display: flex;
}

.col {
    margin: 5px;
    display: flex;
    flex-direction: column;
}

.pane {
    border: 1px solid #aac2e9;    
    border-radius: 5px;
}

.col, .pane {
    height: 100%;
    flex: 1
}
.pane + .pane {
    margin-top : 10px;
}