JSFiddle - React, Tailwind, and code Playground

HTML

<button data-target="search">search</button>
<button data-target="toc">toc</button>
<button data-target="menu">menu</button>

<div class="site-header">
  <nav class="container">
      <div class="content search">
        <div class="searchbar">
          search
        </div>
      </div>

      <div class="content toc">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi condimentum bibendum cursus. Praesent et volutpat felis. Ut varius posuere nisl, nec auctor quam molestie ultrices. Maecenas ac ligula est. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </div>

      <div class="content menu">
        <ul>
          <li>I am</li>
          <li>a narrow</li>
          <li>width menu</li>
        </ul>
      </div> 
   </nav>
 </div>

SCSS

.site-header {
  width: 100%;
  padding-top: 20px;
}

.container {
  border: 2px dotted black;
  display: table;
}

.content { display: none; }
.content.search { display: table-cell; }

.searchbar {
  width: 100%;
  background: yellow;
}

JavaScript

jQuery('button').on('click', function(e) {
	jQuery('.content').css('display', 'none');
	jQuery('.content.' + $(this).data('target')).css('display', 'table-cell');;
});