JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div class="container">
<div class="topcontain cf">
<div class="topleft">testing left</div>
<div class="topcenter"><img class="" src="http://s3.postimg.org/4smfaxjtb/toutdemo.png"></div>
<div class="topright">testing right</div>
</div>
<div class="bodypart">
<div class="logo"><img src="http://s3.postimg.org/o974xgexb/demologo.png"></div>
<div class="bodycopy">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, voluptas, nobis consequatur natus odit incidunt doloribus ipsa cum commodi dolor nostrum id saepe illo harum provident explicabo pariatur autem. Quam.</p>
<p>Sed, consequatur, ipsa quod nobis at magnam omnis ducimus adipisci quam mollitia quisquam minima sit voluptatem sequi deleniti exercitationem qui quos accusamus eveniet nostrum similique vitae nihil repellat itaque quis!</p>
<p>Labore, ipsa, veritatis, voluptatum quasi similique blanditiis consectetur eaque alias illo ut iure fugit? Reiciendis, blanditiis, maiores, asperiores, exercitationem earum placeat est ex quae minus deleniti itaque animi eius omnis.</p>
<p>Culpa, aspernatur, dicta, molestiae maiores consectetur in fugit iste reiciendis ducimus nostrum tenetur temporibus modi quae blanditiis pariatur! Atque, pariatur tempore sint nam id odit architecto sunt asperiores blanditiis odio?</p>
<p>Inventore laboriosam id temporibus fugiat. Cum, doloribus, aperiam dolorem omnis reiciendis commodi officia temporibus debitis nihil sequi molestias similique quia. Tempore, deserunt, repellat consequuntur hic earum inventore repellendus sed saepe?</p>
</div>
</div>
</div>
</body>
CSS
.container {
text-align: center;
width: 100%;
}
.topcontain {
width:80%;
text-align:center;
/*overflow: hidden;*/
border:1px solid #f00;
height:75px;
position:relative;
display: table;
}
.topcontain > div { -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: table-cell;
}
.topleft {
/*margin:auto;*/
border:1px solid #00f;
}
.topcenter {
width:256px;
border:1px solid #0f0;
}
.topright {
border:1px solid #ff0;
}
.bodycopy {
text-align:left;
}
.logo { clear: left; }
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}