JSFiddle - React, Tailwind, and code Playground

HTML

<div class="div1">
    <div class="div2">
        <img src="" class="img1" /></div>
    <img src="" class="img2" />
    <div class="div3"></div>
</div>

CSS

body, div {
   padding:1%;
}
body {
    background-color:red;
}
div.div1 {
    height:50%;
    min-height:200px;
    background-color:green;
    width:100%;
    position:absolute;
}
div.div2 {
    float: left;
    height:50%;
    background-color:red;
}
div.div3 {
    float:left;
    height:40%;
    background-color:grey;
}
img.img1 {
    float:left;
    height:96%;
    background-color:black;
    width:100px
}
img.img2 {
    float:left;
    height:50%;
    width:100px;
    background-color:yellow;
}