<div class="container">
    <div class="chart">
        <dl class="numbers" aria-hidden="true">
            <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">
                        <span class="visually-hidden">50%</span>
                    </div>
                    <div class="bar overlap" data-percentage="53">
                      <span class="visually-hidden">53%</span>
                    </div>
                </dd>
            </div>
            <div>
                <dt>2019</dt>
                <dd>
                    <div class="bar" data-percentage="30">
                      <span class="visually-hidden">30%</span>
                    </div>
                    <div class="bar overlap" data-percentage="26">
                      <span class="visually-hidden">26%</span>
                    </div>
                </dd>
            </div>
            <div>
                <dt>2020</dt>
                <dd>
                    <div class="bar" data-percentage="60">
                      <span class="visually-hidden">60%</span>
                    </div>
                    <div class="bar overlap" data-percentage="63">
                      <span class="visually-hidden">63%</span>
                    </div>
                </dd>
            </div>
            <div>
                <dt>2021</dt>
                <dd>
                    <div class="bar" data-percentage="100">
                      <span class="visually-hidden">100%</span>
                    </div>
                    <div class="bar overlap" data-percentage="95">
                      <span class="visually-hidden">95%</span>
                    </div>
                </dd>
            </div>
            <div>
                <dt>2022</dt>
                <dd>
                    <div class="bar" data-percentage="80">
                      <span class="visually-hidden">80%</span>
                    </div>
                    <div class="bar overlap" data-percentage="86">
                      <span class="visually-hidden">86%</span>
                    </div>
                </dd>
            </div>
        </dl>
    </div>
    <figure class="legend" aria-hidden="true">
        <div class="type1">Estimate</div>
        <div class="type2">Actual</div>
    </figure>
</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;
}


.bar:focus {
  outline: 1.5px solid #f1f1f1;
}


.visually-hidden {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}

/* LEGEND STYLES */

.legend {
  position: relative;
}

.legend div::before {
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  margin: 3px -15px;
}

.legend .type1 {
  margin: 10px 0px;
  color: #ffffff;
}

.legend .type1::before {
  background-color: #25deaa;
}

.legend .type2 {
  color: #ffffff;
}

.legend .type2::before {
  background-color: #838383;
}

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