JSFiddle - React, Tailwind, and code Playground

by audetwebdesign

HTML

<div class="wrapper">
    <div class="logo"> <a href="#">LOGO HERE</a></div>
    <div class="links"> 
        <a href="#">LINK 1</a>
        <a href="#">LINK 2</a>
        <a href="#">LINK 3</a>
    </div>
</div>

CSS

.wrapper {
    width:100%;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    outline: 1px solid blue; /* for demo only*/
}
.logo {
    width:74%; /* allow 1% for any white space between logo and links */
    font-size:100px;
    outline: 1px solid blue; /* for demo only*/
    display: inline-block;
    vertical-align: bottom;
}
.links {
    width:25%;
    position:relative;
    outline: 1px solid blue; /* for demo only*/
    display: inline-block;
}