JSFiddle - React, Tailwind, and code Playground

by Thiago Diniz

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.css">
<header>
    <div class="container">
        <div class="row">
            <a href="" class="col-xs-12 col-sm-3 logo">Meu Logo</a>
            
            <nav class="col-xs-12 col-sm-9 nav">
                <ul>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Link</a></li>
                </ul>
            </nav>
        </div>
    </div>
</header>

CSS

*{
    margin:0;
    padding:0
}

header{
    padding:15px 0;
}

.logo{
    height:80px;
    color:#FFF;
    text-align:center;
    line-height:80px;
    display:block;
    background-color: blue
}

.nav{
    padding:0
}

.nav ul{
    height:80px; /* DEFINIR A ALTURA DO PAI QUE É A ALTURA DO ANTECESSOR NO CASO O LOGO */
    display:flex; /* DISPLAY FLEX NO PAI */
    background-color:green
}

.nav li{
    margin:0 2px;
    list-style:none;
    align-self: center; /* ALIGN SELF PARA CENTRALIZAR O FILHO NO PAI */
}

.nav li a{
    padding:5px 8px;
    color:#FFF;
    background-color:red;
}