JSFiddle - React, Tailwind, and code Playground

by Kevin Pliester

HTML

<div id="wrapper">
  <div id="main">
    [MAIN]
  </div>

  <div id="sub">
    [SUB]
  </div>

  <div id="content">
    <div class="toggle">
      <div class="toggle-main">MAIN</div>
      <div class="toggle-sub">SUB</div>
    </div>
    <div class="container">
      [CONTENT]
    </div>
  </div>
</div>

SCSS

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flext-start;
  #main {
    flex: 1 20%;
    height: 100%;
    background: red;
    @media(max-width:1080px) {
      flex: 1 100%;
      width: 270px;
      position: fixed;
      left: -270px;
      top: 0;
      &.open {
        left: 0px;
      }
    }
  }
  #sub {
    flex: 1 20%;
    height: 100%;
    background: blue;
    @media(max-width:1080px) {
      flex: 1 100%;
      width: 270px;
      position: fixed;
      right: -270px;
      top: 0;
      &.open {
        right: 0px;
      }
    }
  }
  #content {
    flex: 1 60%;
    height: 100%;
    @media(max-width:1080px) {
      flex: 1 100%;
    }
  }
}

JavaScript

jQuery(function($){

});