JSFiddle - React, Tailwind, and code Playground

HTML

<header class="bg-grey clearfix">
    <div class="logo"><a href="#" class="ir">my logo</a></div>
    <nav>
        <a href="#">one</a>
        <a href="#">two</a>
        <a href="#">three</a>
        <a href="#">four</a>
        <a href="#">five</a>
    </nav>
</header>

<br/><br/>
<p>Ideally, the links would verticle align to the bottom of the logo (250x30 placeholder image). Probably using line-height and verticle-align baseline/text-bottom. But I can't get it to work out without ghetto hacks.</p>

CSS

header {
    padding: 20px 5px;
    position: relative;
}

.logo {
    float: left;    
}
.logo a {
    display: block;
    width: 250px;
    height: 30px;
    background: #fff url(http://placehold.it/250x30) no-repeat;

}
nav {
    position: absolute;
    bottom: 20px;
    right: 0;
}
nav a {
    color: #fff;
}

.bg-grey {
    background-color: #333;
}

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}