JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
  <div id="menu-wrapper">
    <div id="menu">
      <div id="menu-button">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
      </div>
    </div>
  </div>
  <div id="content-wrapper">
    <div id="content">

    </div>
  </div>
</div>

CSS

#wrapper {
  display: grid;
  grid-template-columns: auto 1fr;
  height: 100vh;
  background: #eeeeee;
}

#menu-wrapper {
  grid-column: 1;
  border-right: 1px solid #444444;
}

#menu {
  width: 300px;
  transition: width 1s;
}

#menu.closed {
  width: 50px;
}

#menu-button {
  width: 50px;
  height: 50px;
  float: right;
}

.bar {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
}

#content-wrapper {
  grid-column 2;
}

@media all and (max-width: 900px) {
  #wrapper {
    grid-template-columns: 1fr;
    grid-template-rows: auto 100%;
  }
  #menu-wrapper {
    grid-row: 1;
    grid-column: 1;
    border-bottom: 1px solid;
    border-right: none;
  }
  #menu {
    width: 100%;
    height: 100px;
    transition: height 1s;
  }
  #menu.closed {
    height: 50px;
  }
  #content-wrapper {
    grid-column: 1;
    grid-row: 2;
  }
}

JavaScript 1.7

$('#menu-button').click(function() {
  $('#menu').toggleClass('closed');
});