JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
    	<div class="header-left
">LEFT</div>
            <div class="header-right">RIGHT</div>

    	<div class="logo"><img src="images/logo" width="409" height="138" /></div>
</div>

CSS

body {
    min-width: 600px;
}

.header-left {
	float: left;
    width: 50%;
    margin-right: -204.5px;
    border-right: 204.5px solid transprent;
    background: yellow;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.logo {
	width:409px; /* width of the logo */
	margin:10px auto 0 auto;
    background-color: red;
    position: relative;
    z-index: 1;
}
.header-right {
	float: right;
    width: 50%;
    margin-left: -204.5px;
    background: cyan;
    border-left: 204.5px solid transparent;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}