JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="background">

<div class="flex_container">

<div class="flex_left">
<div class="main">
left
</div>
</div>

<div class="flex_right">
<div class="item">item 1</div>
<div class="item">item 2</div>
<div class="item">item 3</div>
<div class="item">item 4</div>
</div>


</div>

</div>

CSS

body {margin:0;}

.flex_container {max-width:1160px;margin:auto;display:flex;justify-content: space-between;flex-wrap: wrap;}

.flex_left {width:820px;background-color:#cccccc;}

.flex_right {width:320px;background-color:#cccccc;display:flex;justify-content: space-between;flex-wrap: wrap;}

.item {width:320px;background-color:#bbbbbb;margin:0 0 20px 0;}

.main {margin:0 0 20px 0;}




@media screen and (max-width: 1160px) {
.flex_container {max-width:1000px;}
.flex_left {width:660px;}    
}

@media screen and (max-width: 1000px) {
.flex_container {max-width:820px;}
.flex_left {width:480px;}    
}

@media screen and (max-width: 820px) {
.flex_container {max-width:660px;}
.flex_left {width:660px;}  
.flex_right {width:660px;}
}

@media screen and (max-width: 660px) {
.flex_container {max-width:480px;}
.flex_left {width:480px;}  
.flex_right {width:480px;}
.item {width:480px;}
}

@media screen and (max-width: 480px) {
.flex_container {max-width:320px;}
.flex_left {width:320px;}  
.flex_right {width:320px;}
.item {width:320px;}
}