size css element from bottom as a percent of parent

Question

I'm trying to get a vertical bar graph made in css, so it appears to look like this:

But it's flipped upside down with my code. How can the CSS elements be aligned from the bottom?

HTML:

<div id="skill">
    <div><span class="bar nrml"></span>
    <span class="bar moderate"></span><span class="bar severe"></span>
</div>

CSS:

#skill {  
  font: 12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  height: 200px;
  position: relative;
  padding: 0px 0;
}

#skill div {
  margin-bottom: 0px;
  background: #e9e5e2;
  width: 1em;
  border-radius: 10px;
  height: 200px;
}

.bar {
  width: 1em;
  height: 200px;
  margin: 1px 2px;
  position: absolute;
  border-radius: 10px;
}

.severe {
  height: 25%;
  background-color: #f674a4;
}

.moderate {
  height: 50%;
  background-color: #f0bb4b;
}

.nrml {
  height: 100%;
  background-color: #a1ce5b;
}

JSFiddle

Answer 1

You have to just add bottom:0; to the class .severe . Here a new updated fiddle: https://jsfiddle.net/sebastianbrosch/yoqhkpwh/2/