JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>
    
    <div id="header">
        <div id="header-holder" class="clearfix">
           <div id="logo"></div>
           <div id="menu"></div>
        </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;
}

#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;
}

.clearfix:after {
    content: "\0020"; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    overflow:hidden;
}

.clearfix {
    display: block;
}

.clearfix {
    //display: inline-block;
}

* html .clearfix {
    height: 1%;
}