JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width: 500px">
    <div class="flex">
        <div style="background: green">
            <br/>A
            <br/>B
            <br/>C
            <br/>D
            <br/>E
            <br/>F
            <br/>G
            <br/>H
            <br/>I
            <br/>
        </div>
        <div style="background: yellow">
            <br/>A
            <br/>B
            <br/>C
            <br/>D
            <br/>E
            <br/>F
            <br/>G
            <br/>H
            <br/>I
            <br/>
        </div>
    </div>
    <div class="flex" style="height: 110px; overflow-y: scroll;">
        <div style="background: blue">
            <br/>A
            <br/>B
            <br/>C
            <br/>D
            <br/>E
            <br/>F
            <br/>G
            <br/>H
            <br/>I
            <br/>
        </div>
        <div style="background: red">
            <br/>A
            <br/>B
            <br/>C
            <br/>D
            <br/>E
            <br/>F
            <br/>G
            <br/>H
            <br/>I
            <br/>
        </div>
    </div>
</div>

CSS

.flex {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.flex > div {
    flex-grow: 1;
}

.flex > div:first-of-type {
     width: 250px;
     flex-grow: 0;
}