.wrapper
  .graph
    .graph__item
      .graph__link(style="height: 148px;")
      .graph__year 2019
    .graph__item
      .graph__link(style="height: 142px;")
      .graph__year 2018
    .graph__item
      .graph__link(style="height: 149px;")
      .graph__year 2017
    .graph__item
      .graph__link(style="height: 149px;")
      .graph__year 2016
    .graph__item
      .graph__link(style="height: 155px;")
      .graph__year 2015
    .graph__item
      .graph__link(style="height: 160px;")
      .graph__year 2014
    .graph__item
      .graph__link(style="height: 161px;")
      .graph__year 2013
    .graph__item
      .graph__link(style="height: 160px;")
      .graph__year 2012
    .graph__item
      .graph__link(style="height: 165px;")
      .graph__year 2011
    .graph__item
      .graph__link(style="height: 168px;")
      .graph__year 2010
    .graph__item
      .graph__link(style="height: 163px;")
      .graph__year 2009
    .graph__item
      .graph__link(style="height: 158px;")
      .graph__year 2008
    .graph__item
      .graph__link(style="height: 161px;")
      .graph__year 2007
View Compiled 
.wrapper {
  max-width: 300px;
  font-size: .8rem;
  margin-bottom: 1rem;
  display: inline-block;
  overflow-x: hidden;
}

.graph {
  display: flex;
  align-items: flex-end;
  direction: rtl;
  text-align: center;
  overflow-x: scroll;
  width: 100%;
}

.graph__item {
  margin: 0 5px;
}

.graph__link {
  flex: 1;
  padding-top: 3px;
  width: 30px;
  background-color: #15649c;
  display: block;
  text-decoration: none;
  color: #ffffff;
  text-align: center;
}

.graph__year {
  padding-bottom: 1rem;
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.