JSFiddle - React, Tailwind, and code Playground

by fool

HTML

<div id="banner">
    <div class="container">
        <div id="branding">
             <h1>Site Name</h1>
            <p>Your catchy slogan goes here.</p>
        </div>
        <div id="advert">
            <div class="advert">
                	<h1>Your advertisement could be here!</h1>
            </div>
        </div>
    </div>
</div>

CSS

#banner {
    background: #C1CE96;
    padding: 0;
    margin: 0;
    width: 100%;
    display: table;
    height: 10%;
    position: relative;
    display: table;
}
#banner #branding {
    padding: 10px;
    display: table-cell;
    vertical-align: middle;
    background: yellow;
}
#banner #branding h1 {
    font-size: 1.5em;
    color: #484A47;
}
#banner #branding p {
    font-size: 1em;
}
#banner #advert {
    vertical-align: middle;
    display: table-cell;
}
.advert {
    width: 468px;
    height: 60px;
    background: #fff;
    border: 1px solid #484A47;
    text-align: center;
}
.advert h1 {
    font-size: 1em;
}