JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<div class="wrapper">
  <div class="main-wrapper">
    <div class="main"></div>
  </div>

  <div class="sidebar" position="left"></div>
  <div class="sidebar" position="right"></div>
</div>

SCSS

$screen-sm-min: 768px !default;
$sidebar-sm-width: 25% !default;
.wrapper {
  &:after {
    display: table;
    width: 100%;
    content: '';
  }
}

.sidebar,
.main {
  height: 256px;
}

.main {
  background: #efe;
  @media (min-width: $screen-sm-min) {
    margin: 0 $sidebar-sm-width;
  }
  &-wrapper {
    @media (min-width: $screen-sm-min) {
      float: left;
      width: 100%;
    }
  }
  @media (min-width: $screen-sm-min) {
    //float: left;
  }
}

.sidebar {
  @media (min-width: $screen-sm-min) {
    width: $sidebar-sm-width;
    float: left;
  }
  &[position="left"] {
    background: #aaa;
    @media (min-width: $screen-sm-min) {
      margin-left: -100%;
    }
  }
  &[position="right"] {
    background: #abc;
    @media (min-width: $screen-sm-min) {
      margin-left: -$sidebar-sm-width;
    }
  }
}