JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container clearfix">
  <div class="head">
    <div class="brand">Brand Name</div>
    <div class="nav">Nav content Here</div>
  </div>
</div>

CSS

.container {
  width: 100%;
  margin: 10% auto;
  background:#ccc;
}

.head {
  float: left;
  width: 100%
}

.brand {
  float: left;
  margin: 0 3%;
  width: auto;
}

.nav {
  float: right;
  margin: 0 3%;
  width: auto
}


.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }