<div class="chart">
  <div class="bar-1"></div>
  <div class="bar-2"></div>
  <div class="bar-3"></div>
  <div class="bar-4"></div>
  <div class="bar-5"></div>
  <div class="bar-6"></div>
  <div class="bar-7"></div>
  <div class="bar-8"></div>
  <div class="bar-9"></div>
  <div class="bar-10"></div>
  <div class="bar-11"></div>
  <div class="bar-12"></div>
</div>

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background-color: #eee;
  display: flex;
  justify-content: center;
}

.chart {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(100, 1fr);
  grid-column-gap: 5px;
  height: 100vh;
  width: 70vw;
  padding: 5px 10px;
}

[class*="bar"] {
  border-radius: 5px 5px 0 0;
  transition: all .6s ease;
  background-color: #ff4136;
  grid-row-start: 1;
  grid-row-end: 101;
}

.bar-1 {
  grid-row-start: 20;
}