JSFiddle - React, Tailwind, and code Playground

by zhang li

HTML

<div class="screen">
    <div class="container">
        <div class="item1">
            w<br>
            w<br>
            w<br>
            w<br>
            w<br>
            w<br>
            w<br>
            w<br>
            w<br>
            w<br>
            w<br>
            w<br>
        </div>
        <div class="item2"></div>
    </div>
</div>

CSS

.screen {
    display: flex;
    flex-direction: column;
    height: 100px;
    background: red;
}
.container {
    flex: 1;
    display: flex;
}

.item1 {
    background: blue;
    flex: 1;
    color: lightblue;
    overflow: auto;
}
.item2 {
    background: green;
    flex: 2;
}