JSFiddle - React, Tailwind, and code Playground

HTML

<header id="masthead" class="site-header" role="banner">
  <div class="site-branding">
    <h1 class="site-title"><a href="#" rel="home">Sitename</a></h1>
  </div><!-- .site-branding -->

  <nav id="site-navigation" class="main-navigation" role="navigation">
    <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"></button>
<ul>
  <li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
  </nav><!-- #site-navigation -->
</header><!-- #masthead -->

CSS

.site-branding {
  clear: none;
  display: inline;
  }

.site-title {
  clear: none;
  display: inline-block;
  width:30%;
  }

.main-navigation {
  display: inline-block;
  width:50%;
  }

ul >li{
display: inline-block;
}