JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div class="wrapper">
<header>
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</header>
</div>
</body>
CSS
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.wrapper {
width: 1000px;
margin: 0 auto;
}
header:after {
content: ".";
display: block;
visibility: hidden;
height: 0;
clear: both;
}
.left {
float: left;
width: 300px;
height: 195px;
background: #888;
border: 1px solid #000;
}
.middle {
float: left;
width: 350px;
height: 195px;
background: #888;
border: 1px solid #000;
}
.right {
float: right;
width: 350px;
height: 195px;
background: #888;
border: 1px solid #000;
}