<div class="container">
    <div class="chart">
        <dl class="numbers">
            <dd><span>100%</span></dd>
            <dd><span>80%</span></dd>
            <dd><span>60%</span></dd>
            <dd><span>40%</span></dd>
            <dd><span>20%</span></dd>
            <dd><span>0%</span></dd>
        </dl>
        <dl class="bars">
            <div>
                <dt>2018</dt>
                <dd>
                    <div class="bar" data-percentage="50"></div>
                    <div class="bar overlap" data-percentage="53"></div>
                </dd>
            </div>
            <div>
                <dt>2019</dt>
                <dd>
                    <div class="bar" data-percentage="30"></div>
                    <div class="bar overlap" data-percentage="26"></div>
                </dd>
            </div>
            <div>
                <dt>2020</dt>
                <dd>
                    <div class="bar" data-percentage="60"></div>
                    <div class="bar overlap" data-percentage="63"></div>
                </dd>
            </div>
            <div>
                <dt>2021</dt>
                <dd>
                    <div class="bar" data-percentage="100"></div>
                    <div class="bar overlap" data-percentage="95"></div>
                </dd>
            </div>
            <div>
                <dt>2022</dt>
                <dd>
                    <div class="bar" data-percentage="80"></div>
                    <div class="bar overlap" data-percentage="86"></div>
                </dd>
            </div>
        </dl>
    </div>
</div> 

body {
    margin: 0;
    padding: 0;
    background: #333;
    font-family: Arial, Helvetica, sans-serif;
}

.container {
    padding: 20px;
    display: flex;
    flex-direction: row;
}

.chart {
    display:flex;
}


/* Y-AXIS STYLES */

.numbers {
  color: #fff;
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0 20px 0 0;
  padding: 0;
}

.numbers dd {
  background-image: linear-gradient(45deg, #000, #333);
  padding: 0 10px;
  font-size: 14px;
  font-weight: 600;
  align-items: center;
  justify-content:center;
  display: flex;
  margin: 0;
  flex: 60px;
  width: 100%;
}

/* BAR STYLES */

.bars {
  background: #111;
  padding: 0px 20px;
  display: flex;
  flex: auto;
  gap: 50px;
  margin: 0;
  position: relative;
}

.bars > div {
  align-items: center;
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
  width: 50px;
}

.bars dt {
  font-size: 14px;
  color: #fff;
  position:absolute;
  bottom: -35px;
  z-index: 2;
}

.bars dd .bar {
   display: block;
    background: #25deaa;
    width: 50px;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    transition: 0.5s;
    transition-property: box-shadow;
    z-index: 2;
}

.bars dd .bar:hover {
    box-shadow: 0px 2px 8px 1px #25deaa;
    cursor: pointer;
}

.bars dd .overlap {
  background: #696969;
  z-index: 1;
  width: 70px;
  margin-left: -10px;
}

.bars dd .overlap:hover {
    box-shadow: 0px 2px 8px 1px #696969;
}

var bars = document.querySelectorAll("dd .bar");
bars.forEach((bar) => {
    var height = bar.getAttribute("data-percentage");
    bar.style.height = height + "%";
});