JSFiddle - React, Tailwind, and code Playground

HTML

<div class="horizontal-spread"
    style="background-color: red;">
        
    <h1>Title</h1>
    <div class="nav">
        <a>A Link</a>
        <a>Another Link</a>
        <a>A Third Link</a>
    </div>
</div>
<div
    style="background-color: green;">
    Some content!
</div>

CSS

/* ########################################################################################## */
/* Spread out elements over the entire width of their parent */
/* See:; http://stackoverflow.com/questions/10272605/align-two-inline-blocks-left-and-right-on-same-line */

.horizontal-spread {
  text-align: justify;
  margin: 0px;
  margin-bottom: -1em;
  padding: 0px;
}

.horizontal-spread > * {
  display:inline-block;
}


/* empty pseudo element with 100% width will let `text-align:justify` do it's magic */
.horizontal-spread:after {
  content: '';
  display:inline-block;
  width: 100%;
  line-height: 0;
  font-size: 0;
}



.nav {
    background-color: grey;
}
}