JSFiddle - React, Tailwind, and code Playground

by Jenti Dabhi

HTML

<div class="wrap">
     <div class="one"></div>
     <div class="two"></div>
     <div class="three"></div>
     <div class="four"></div>
</div>

CSS

.wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.wrap > div{
    border: 1px solid;
    height: 200px;
}

.one {
    flex: 0 1 200px;
}

.two {
    flex: 1 1 auto;
}

.three {
    flex: 0 1 200px;
}

.four {
    
}