JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div id="container">
		<div id="leftcol"> left left left left left left left left left left left left left </div>
		<div id="rightcol"> right right right right right right right right right right right right </div>
		<div id="midcol"> mid mid mid mid mid mid mid mid mid mid mid mid mid mid mid  </div>
	</div>
</body>

CSS

/* CSS Document */

*{
	margin:0;
	padding:0;
}

#container {
	width: 100%;
	height: 600px;
	background-color:#FFFF00;
}

#leftcol {
	float:left;
	width:20%;
	height: 600px;
	background-color:#FF0000;
}


#rightcol {
	float:right;
	width:20%;
	height: 600px;
	background-color:#0099FF;
}

#midcol {
	height: 600px;
	background-color:#339900;
}


@media screen and (max-width:480px) {
	#container {
	width: 100%;
	height: auto;
	background-color:#FFFF00;
}

#leftcol {
	width:100%;
	height: auto;
	background-color:#FF0000;
}


#rightcol {
	width:100%;
	height: auto;
	background-color:#0099FF;
}

#midcol {
	height: auto;
	background-color:#339900;
}
}