JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>
    
    <div id="header">
        <div id="header-holder">
           <div id="logo"></div>
           <div id="menu"></div>
           <br class="clearer">
        </div>
    </div>
    
    <div id="slider">
        <div id="slider-holder">
           LOREM
        </div>
    </div>
    
</body>
</html>

CSS

#header{
width:100%;
}

#header-holder{
    width:950px;
    margin: 35px auto 20px auto;
    background-color:#cccccc;
}

#slider{
width:100%;
margin-top:20px;
clear:both;
}

#slider-holder{
    width:950px;
    height:200px;
    margin: 0 auto;
    background-color:red;
    
}
#logo {
    width:287px;
    height:76px;
    background-color:green;
    float:left;
}

#menu {
    width:287px;
    height:76px;
    background-color:blue;
    float:right;
}

.clearer {
   clear: both;   
}