JSFiddle - React, Tailwind, and code Playground

by Mac1ovin

HTML

<div class="flexbox">
  <div class="content"> <h4> Content </h4> </div>
  <div class="sidebar"> <h4> Sidebar </h4> </div>
</div>

SCSS

// MISC STYLES
// ===============

h4 {
  text-align: center;
  padding-top: 1em;
  padding-bottom: 1em;
}

.content {
  background: rgba(red, 0.25);
}

.sidebar {
  background: rgba(yellow, 0.25);
}

// FLEXBOX LAYOUT 1
// ================

.flexbox {
  display: flex;
  .content { flex-basis: 75%; }
  .sidebar { flex-basis: 25%; }
}