Set the width of the parent with the child element

Question

I have a challenge that seems simple, but is causing me lack of sleep. Here's what I want to achieve:

1. .toc makes the parent go fullwidth, works as intended
2. .menu has a narrow parent, works as intended
3. .searchbar needs full width parent, does't work

How do I fix my searchbar issue?

My fiddle is here: https://jsfiddle.net/afz7qth3/1/

<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">
        Lot of Lorem ipsum [...] elit.
      </div>

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

.site-header {
  width: 100%;
}

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

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

.searchbar {
  width: 100%;
}

the .content divs are toggled with JS.

I have checked here How to make a div fill a remaining horizontal space? and here CSS fill remaining width and here Two divs side by side - Fluid display which did not help me.

Thank you,