JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer">
    <div id="A">
        Test<br/>        
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>
    </div>
    <div id="B"></div>
</div>

CSS

body, html{
    width: 100%;
    height: 100%;
}
#outer{
    width: 100%;
    height: 100%;
    background: yellow;
    display: flex;
    flex-direction: columN
}

#A{ 
    height: 20px;
    max-height: 100%;
    width: 100%;
    flex: 2;
    background: #cccccc;
    overflow: auto;
}

#B{
    height: 200px;
    width: 100%;
    background: blue;
}

JavaScript

$("#B").resizable({
    handles: "n"
});