JSFiddle - React, Tailwind, and code Playground

HTML

<div id="logomenuwrapper">
    <div id="logo"><img src="http://placehold.it/100x88"/></div>
<div id="menu">
    <ul>
        <li><a href="#">About</a></li>
        <li class="notfirst"><a href="#">Work</a></li>
        <li class="notfirst"><a href="mailto:[email protected]?subject=Hello">Contact</a></li>
    </ul>
</div>
</div>

CSS

img { max-width: 100%; }

#logomenuwrapper { overflow:hidden; }

#logo {
    padding-right:1.2%;
    float:left; 
    width:14%;  // <------
    max-height:100% !important;
    display:block;
}

#menu { float:left;padding-left:1.2%;font-size:0.875em;border-left:1px solid #ea4a4a; }

#menu ul li.notfirst { padding-top:0.3225em; }