JSFiddle - React, Tailwind, and code Playground

HTML

<div class="overmiddlediv">
	<div class="sidedivs"><p>Left side</p></div>
	<div class="centerdiv"><p>This is the middle and is 50%</p></div>
	<div class="sidedivs"><p>Right side</p></div>
</div>

CSS

html, body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
.overmiddlediv {
    	width:100%;
    	height:150px;
    	background-color:blue;
    	float:left;
    }
    .sidedivs {
    	width: 25%;
    	float:left;
    	padding-left:50px;
    	background-color:red;
    }
    .centerdiv {
    	width: 50%;
    	float:left;
    	background-color:white
    }