JSFiddle - React, Tailwind, and code Playground

by Gothdo

HTML

<header id="masthead" class="site-header" role="banner">

    <div class="site-branding">

        <div id="logo" class="doguni-logo">
            <img src="/wp-content/themes/doguni/layouts/images/doguni-logo.jpg" alt="">
        </div>

    </div><!-- .site-branding -->

    <div class="reg-or-login">
        <ul>
            <li><a href="">Registration</a></li>
            <li><a href="" class="highlight">Login</a></li>
        </ul>
    </div>

</header>

CSS

.site-header {
  width: 960px;
  margin: 0 auto;
  overflow: hidden; }
  .site-header .site-branding {
    float: left;
    width: 360px; }
  .site-header .reg-or-login {
    float: right;
    width: 600px;
    overflow: hidden; }