Bar chart w/ CSS only

BarChartCSS.css

.bar-chart {
  margin-right: 1.5em;
  .city {
    position: relative;
    margin-top: 0.5em;
    .bar-label {
      text-align: right;
      width: 135px;
      margin: 0.15em 0;
      float: left;
      h4 {
        font-weight: 400;
        margin: 0;
        font-size: 0.95em;
        line-height: 1em;
      }
      .pop {
        font-size: 0.75em;
        margin: 0;
        color: $text-gray;
        font-style: italic;
      }
    }
    .bar {
      margin-left: 140px;
      .bar-fill {
        background-color: $blue;
        height: 2.2em;
        position: relative;
        @include media($mobile) {
          height: 1.8em;
        }
        .data-label {
          position: absolute;
          right: 0.5em;
          height: 2em;
          top: 0.5em;
          font-size: 0.9em;
          padding-left: 10px;
          color: $background-gray;
          p {
            margin: 0;
            text-shadow: 0px 0px 0.125em rgba(0, 0, 0, 0.4);
          }
        }
      }
    }
    @include media($mobile) {
      margin-top: 0.25em;
      font-size: 0.9em;
      .bar-label {
        width: 120px;
        margin: 0.5em 0;
        .pop {
          display: none;
        }
      }
      .bar {
        margin-left: 125px;
        .bar-fill .data-label {
          top: 0.4em;
        }
      }
    }
  }

BarChartCSS.html

<section class="bar-chart">
    {% for city in MAJOR_CITIES_PCT %}
    <div id="{{ city.city }}" class="city">
      <div class="bar-label">
        <h4>{{ city.city }}</h4>
        <p class="pop">Pop: {{ city.pop2014 }}</p>
      </div>
      <div class="bar">
        <div class="bar-fill" style="width: {{ city.width }}">
          <div class="data-label">
            <p class="font-s">{{ city.percentChange }}</p>
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
  </section>