JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
        
        <div class="box_1">BOX_1</div>

        <div class="box_2">BOX_2
        
        <p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P>
        <p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P>
        <p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P><p>TEXT</P>
        </div>
            
        </div>

CSS

.container{
        position: relative;
        border: 2px solid black;
        background: red;
        width: 800px;
        padding: 0;
        overflow: auto;
        display: table;
    }

    .box_1{
        position: relative;
        background: green;
        height: 100%;
        width: 200px;
        padding: 0;
        display: table-cell;
    }

    .box_2{
        position: relative;
        background: yellow;
        width: 200px;
        padding: 0;
        display: table-cell;
        }