JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="header-region" class="ui top fixed inverted red compact menu grid" style="backgroundColor: red;">
  <div class="two wide column">
    <div class="navbuttons menu">
      <div class="item">
        <button id="nav-back" class="ui red icon button">
          <i class="left chevron icon"></i>
        </button>
      </div>
  Hello
      <div class="item">
        <button id="toggle-sidenav" class="ui red icon button">
          <i class="sidebar icon"></i>
        </button>
      </div>
    </div>
  </div>

  <div class="ten wide column center align">
    <div class="item">
      <div class="ui large breadcrumb">
        <a class="section">Home</a>
        <i class="right chevron icon divider"></i>
        <a class="section">User</a>
        <i class="right chevron icon divider"></i>
        <div class="active section">Profile</div>
      </div>
    </div>
  </div>

  <div class="four wide column">
    <div id="action-region" class="right icon menu">
      <a href="#" class="action item">
        <i class="edit icon"></i>
      </a>
      <a href="#" class="action item">
        <i class="filter icon"></i>
      </a>
      <a href="#" class="action item">
        <i class="trash icon"></i>
      </a>
    </div>
  </div>
</nav>

CSS

.navbuttons div.item {
  display: inline-block;
  padding-left: 0.4em;
  padding-right: 0.4em;
}