JSFiddle - React, Tailwind, and code Playground

by pazzesco

HTML

<div class="one">Content1</div>
<div class="two">Content2</div>
<div class="three">Content3</div>

<div class="500markup">This box is 500px</div>

CSS

.one{
    float:left;
	width:150px;
	border:solid 2px #eaeaea;
	position:relative;
	z-index:0;
	margin-bottom:20px;
	height:100px;
}

.two{
	float:left;
	margin:0 0 0 24px;
	width:150px;
    border:solid 2px #eaeaea;
    height:100px;
	}

.three{
	float:left;
	width:900px;
    border:solid 2px #eaeaea;
    height:100px;
	}

@media only screen and (max-width:500px)
{
    
.one{width: 93%; padding: 3%;}
.two{width: 100%; margin-left: 0px;}
.three{width: 100%; margin: 0px;}
}