JSFiddle - React, Tailwind, and code Playground

by leonsaysHi

HTML

<div class="chart">
  <div class="yaxis">
    <div>0</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
  </div>
  <div class="xaxis">
    <div>bar 1</div>
    <div>bar 2</div>
    <div>bar 3</div>
  </div>
  <div class="bars">
    <div><div style="flex-basis:20%"></div></div>
    <div><div style="flex-basis:70%"></div></div>
    <div><div style="flex-basis:15%"></div></div>
  </div>
</div>

SCSS

.chart {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: 
    "yaxis bars"
    ". xaxis";
  &.-horizontal {
    grid-template-areas: 
      "xaxis bars"
      ". yaxis";
    .xaxis {
      flex-direction: column;
      > * {
        padding: 5px 0;
      }
    }
    .yaxis {
      display: flex;
      flex-direction: row;
    }
    .bars {
      flex-direction: column;
      > * {
        justify-content: flex-start;
        flex-direction: row;
        padding: 5px 0;
      }
    }
  }
  .xaxis {
    grid-area: xaxis;
    display: flex;
    > * {
      flex: 1 0 0;
      padding: 0 5px;
    }
  }
  .yaxis {
    grid-area: yaxis;
    display: flex;
    flex-direction: column; 
    > * {
      flex: 1 0 0;
    }
  }
  .bars {
    grid-area: bars;
    display: flex;
    align-items: stretch;
    > * {  
      flex: 1 0 0;
      display: flex;
      flex-direction: column;    
      align-items: stretch;
      justify-content: flex-end;
      padding: 0 5px;
      > * {
        background-color: grey;
        flex: 0 0 0;
      }
    }
  }
}