<div>
  <button
    type="button"      
    onclick="document.body.classList.toggle('labelsOnTop')"
  >Labels position</button>
  
  <button
    type="button"      
    onclick="document.body.classList.toggle('axisOnRight')"
  >Axis position</button>
  
  <button
    type="button"      
    onclick="document.body.classList.toggle('unitOnBottom')"
  >Unit position</button>
</div>

<div class="bar-chart">
  <div class="axis"></div>
  <div class="unit" contenteditable="true">m²</div>
  
  <div class="chart">
    <div class="item">
      <div class="bars">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
      </div>
      <div class="label" contenteditable="true">
        June
      </div>
    </div>

    <div class="item">
      <div class="bars">
        <div class="bar"></div>
        <div class="bar"></div>
      </div>
      <div class="label" contenteditable="true">
        July
      </div>
    </div>
    
    <div class="item">
      <div class="bars">
        <div class="bar"></div>
      </div>
      <div class="label" contenteditable="true">
        August
      </div>
    </div>
  </div>
</div>
@use postcss-preset-env {
  stage: 0;
}
@use postcss-nested {}

body {
  padding: 1.5rem;
}

.bar-chart {
  display: inline-grid;
  grid-template-columns:
    [left] auto
    [bar1] auto
    [bar2] auto
    [bar3] auto
    [right] auto;
  grid-template-rows:
    [top] auto
    [center] 10rem
    [bottom] auto;
  
  padding: 0.5rem;
  background: lightgray;
}

.axis {
  grid-row: center;
  grid-column: left;
  
  min-width: 20px;
  background-image: linear-gradient(
    0deg,
    black 0%,
    black 1px,
    transparent 1px,
    transparent 100%
  );
  background-size: 10px 20px;
  background-position: right bottom;
  background-repeat: repeat-y;
  
  .axisOnRight & {
    grid-column: right;
    
    background-position: left bottom;
  }
}

.unit {
  grid-row: top;
  grid-column: left;
  justify-self: end;
  
  padding: 0.5rem 0;
  
  .unitOnBottom & {
    grid-row: bottom;
  }
  
  .axisOnRight & {
    grid-column: right;
    justify-self: start;
  }
}

.chart {
  display: contents;
}

.item {
  display: contents;
  
  &:nth-child(1) {
    --column: bar1;
  }
  &:nth-child(2) {
    --column: bar2;
  }
  &:nth-child(3) {
    --column: bar3;
  }
  & > * {
    grid-column: var(--column);
  }
}

.bars {
  grid-row: center;
  
  height: 100%;
  box-sizing: border-box;
  padding: 0 0.5rem;
  
  display: flex;
  align-items: flex-end;
  justify-content: center;
  
  /* Can't use grid-gap if we want to have border without gaps */
  border-bottom: 1px solid black;
}

.bar {
  width: 1rem;
  & + & {
    margin-left: 0.5rem;
  }
  &:first-child {
    height: 60%;
    background: tomato;
  }
  &:nth-child(2) {
    height: 30%;
    background: steelblue;
  }
  &:nth-child(3) {
    height: 90%;
    background: forestgreen;
  }
}

.label {
  grid-row: bottom;
  justify-self: center;
  
  padding: 0.5rem;
  
  .labelsOnTop & {
    grid-row: top;
  }
}

button {
  padding: 0.5em;
  margin-right: 0.5em;
  margin-bottom: 1em;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.