JSFiddle - React, Tailwind, and code Playground

HTML

<div class="one">Content1</div>
    <div class="two">
     CA
    </div>
    <div class="two">
    CB
    </div>
    <div class="two">
    CC
    </div>
<div class="three">Content3</div>

CSS

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

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

.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-bottom: 10px;}
.three{width: 100%; margin: 0px;}
}