JSFiddle - React, Tailwind, and code Playground

by Manoj Kumar

HTML

<ul class="parent-menu">
  <!-- Should be as far left as possible -->
  <li id="main">Some Logo <span>Some tag line.</span>
  </li>
  <ul class="right-menu">
    <!-- Should be as far right as possible -->
    <li>Home</li>
    <li>Products</li>
    <li>Price Sheet</li>
    <li>Capabilities</li>
    <li>Contact</li>
  </ul>
</ul>

CSS

.parent-menu {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between; /* Modify */
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}
li {
  margin: 0 8px;
  padding: 8px;
  font-size: 1rem;
  text-align: center;
  font-weight: bold;
  color: white;
  background: green;
  border: solid 4px #333;
}
#main {
  font-size: 2rem;
}
#main span {
  font-size: 1rem;
}
.right-menu {
  display: flex; /* Add */
}