JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container">
<div id="one">Div 1</div>
<div id="three">Div 3</div>
<div id="two">Div 2</div>
</div>
CSS
html, body
{
padding:0;
margin:0;
}
#container
{
width:100%;
height:auto;
margin:0 auto;
padding:0;
}
#one, #two ,#three
{
width:32%;
margin:0.6666%;
padding:0;
height:200px;
display:block;
}
#one, #two
{
float:left;
}
#three
{
float:right;
}
#one{
background:green;
}
#two
{
background:blue;
}
#three
{
background:red;
}
@media screen and (max-width: 480px)
{
#one, #two, #three
{
width:100%;
margin:5px 0;
display:block;
}
#two
{
float:left;
}
}