JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<nav>
  <ul class='left'>
    <li class='left'>
      one
    </li>
    <li class='left'>
      two
    </li>
    <li class='left'>
      three
    </li>
  </ul>
  <ul class='right'>
    <li class='right'>
      one
    </li>
    <li class='right'>
      two
    </li>
    <li class='right'>
      three
    </li>
  </ul>
</nav>

CSS

nav {
  height: 30px;
  background: white;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  height: 100%;
}

ul.right {
  float: right;
}

ul.left {
  float: left;
}

ul li {
  margin: 0 5px;
  background: red;
  height: 100%;
}

ul li.right {
  float: right;
}

ul li.left {
  float: left;
}