Flexbox Header

HTML
<div id="header"> <div class="flex-wrapper container"> <div class="social-icons block">Social Icons Here</div> <div class="logo block">LOGO</div> <div class="search block">Search</div> </div> <div class="hr-wrap"> <div class="hr-inner-wrap"> <hr /> </div> </div> </div>
CSS
#header { position: relative; } .flex-wrapper { display: flex; align-items: center; justify-content: space-between; } .hr-wrap { top: 0; width: 100%; height: 100%; z-index: -1; position: absolute ; } .hr-inner-wrap { position: absolute; width: 100%; top: 50%; } hr { border: 1px solid #ddd; margin: -1px 0 0 0; } .block { background-color: #fff; padding: 2em; line-height: 1; }
JAVASCRIPT
Expand for more options Login