JSFiddle - React, Tailwind, and code Playground
HTML
<div class="wrap">
<div class="left">
<div class="left-one">
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
HELLO<br>
</div>
<div class="left-two">
<img src="https://i.imgur.com/pSCepJR.jpg">
</div>
</div>
<div class="right">
<img src="https://i.imgur.com/8UZG4cr.jpg">
</div>
</div>
CSS
.wrap {
width:100%;
display:flex;
flex-direction:row;
justify-content:space-between;
align-items:stretch;
background:black;
}
.left {
width:250px;
display:flex;
flex-direction:column;
justify-content:space-between;
background:yellow;
}
.right {
display:flex;
width:calc(100% - 260px);
background: blue;
}
.right img {max-width:100%;}
.left-one {
width:100%;
height:100%;
margin-bottom:10px;
overflow:auto;
background:green;
}
.left-two {
width:100%;
background:red;
}
.left-two img {max-width:100%;}