JSFiddle - React, Tailwind, and code Playground

by Kristian Jabilles

HTML

<div class="wrapper">
  <div class="aside">Aside 1</div>
  <div class="aside">Aside 2</div>
  <div class="footer">Footer</div>
</div>

SCSS

.wrapper {
  display: flex;  
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;
  background: yellow;
}

.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}


.main {
  text-align: left;
  background: deepskyblue;
}

.aside { flex: 1 0 0; }