JSFiddle - React, Tailwind, and code Playground

HTML

<div id="site-top">
    <div id="nav-contain">
        <div id="logo"></div>
        <a class="nav-item-contain" href="#"><i class="fa fa-home" aria-hidden="true"></i> a</a>
        <a class="nav-item-contain" href="#"><i class="fa fa-inbox" aria-hidden="true"></i>  b</a>
        <a class="nav-item-contain" href="#"><i class="fa fa-glass" aria-hidden="true"></i> c</a>
        <a class="nav-item-contain" href="#"><i class="fa fa-cutlery" aria-hidden="true"></i> d</a>
        <a class="nav-item-contain" href="#"><i class="fa fa-map-marker" aria-hidden="true"></i> e</a>
        <a class="nav-item-contain" href="#"><i class="fa fa-futbol-o" aria-hidden="true"></i> f</a>
    </div>
</div>

CSS

#site-top {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    min-height:30px;
    padding:20px;
    background-color:#fff;
}
#nav-contain {
    display:flex;
    justify-content: flex-end;
    align-items: flex-end;
}
#logo, .nav-item-contain {
    flex-grow: 1;
}
#logo {
    width: 200px;
    height: 60px;
    background-color:red;
}