JSFiddle - React, Tailwind, and code Playground

HTML

<div class="fixed">
  <h1>
  Title
  </h1>
  
  <nav>
    <ul>
      <li>
        <a href="#">link1</a>
      </li>
      <li>
        <a href="#">link2</a>
      </li>
    </ul>
  </nav>
</div>

SCSS

.fixed
{
  width: 100%;
  height: 100px;
  background-color:red;
}

h1
{
  display:inline-block;
  margin:0;
  color:white;
  line-height: 100px;
}

nav
{
    position:relative;
    height:100%;
    width: auto;
    display:inline-block;
    vertical-align: top;
    background-color:green;
    top:0;
    right:0;

    > ul
    {
        height:100%;
        margin: 0;
        padding: 0;

        > li
        {
            font-size: 15px;
            text-align:center;
            display:inline-block;
            line-height: 100px;


            &:not(:last-child)
            {
                margin-right:0;
            }

            button
            {
              padding: 0;

              &:hover
              {
                background-color: inherit;
                border:none;
              }
            }

            a
            {
            }
        }
    }
}