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
{
  height: 100px;
  line-height: 100px;
  display:inline-block;
  margin:0;
  
  color:white;
}

nav
{
    position:relative;
    height:100%;
    width: auto;
    display:inline-block;
    background-color:green;

    top:0;
    right:0;

    > ul
    {
        height:auto;

        > li
        {
            font-size: 15px;
            padding: 0 12px;
            text-align:center;
            line-height: inherit;
            display:inline-block;


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

            button
            {
              padding: 0;

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

            a
            {
                line-height: 50px;
            }
        }
    }
}