JSFiddle - React, Tailwind, and code Playground

by michananya

HTML

<div class="container">
  <div class="grid">Grid</div>
  <div class="side-bar">
    <div class="graph">Graph 1</div>
    <div class="graph">Graph 2</div>
    <div class="graph">Graph 3</div>
    <div class="graph">Graph 4</div>
  </div>
</div>

CSS

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: stretch;

}
.grid {
  background: #eeeeee; 
  flex-grow: 2;
  height: 600px;
  margin-right: 12px;

}
.side-bar {
  Width: 490px;
  background: #eeeeee;
  height: 600px;
  display: flex;
  flex-wrap: wrap;
  align-content : flex-start;
}
@media screen and (max-width: 1280px) {
  .side-bar {
    Width: 30%;
    min-width: 260px;
  }
}

.graph {
  min-width: 230px;
  height: 190px;
  background: #cccccc;
  margin: 7px;
}