JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
    <div class="logo">logo</div>
    <ul class="links">        
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul class="right">        
        <li>how to</li>
        <li>float us</li>
        <li>right?</li>
    </ul>
</div>

CSS

.menu {
    width: 100%;
    display: table;
    padding: 1rem;
    background: #eee;
}

.logo {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    background: #ccc;
    padding: 0 2rem;
    height: 9rem;
}

ul {
    margin: 0 1rem;
}

.links {
    display: table-cell;
    vertical-align: middle    
}

.links li {
    padding: 1rem;
    display: inline-block;
    background: #ddd;
}

.right {
   display: table-cell;
   vertical-align: middle;  
}

.right li {
    display: inline-block;
    padding: 0.5rem;
    background: #fed900;
}