Title aligning on same baseline

by sambaldwin

HTML

<div class="logo">
    <h1>Title</h1>
</div>

<div class="nav">
    <ul>
        <li>Title</li>
        <li>Title</li>
        <li>Title</li>
    </ul>
</div>

<div class="guide">
</div>

CSS

* {
    margin:0;
    padding:0;
    box-model:border-box;
}

html {
    font-size:16px;
}

body {
    font-family:"Helvetica Neue";
    font-weight:500;
    font-size:100%;
    line-height:1.4em;
}

h1 {
    font-size:200%;
    line-height:1.4em;
}

li {
    display:inline;
    margin-right:1em;
}

ul {
    list-style-type:none;
}

.logo, .nav {
    float:left;
    width:50%;
}

.guide {
    border-bottom:1px solid cyan;
    position:absolute;
    top:2.1em;
    z-index:1;
    width:100%;
}