title: How to position inner div (vertical progress bar) at the bottom of outer div?
body: <p>I am using Ionic 2, and am attempting to create a vertical progress bar component - illustrating a tank level.</p>
  
  <p>This is what I have so far:</p>
  
  <pre class="lang-css prettyprint-override"><code>tank-bar {
      .progress-outer {
          height: 96%;
          margin: 10px 2%;
          padding: 3px;
          text-align: center;
          background-color: #f4f4f4;
          border: 2px solid #dcdcdc;
          color: dark;
          border-radius: 20px;
      }
  
      .progress-inner {
          min-height: 15;
          white-space: nowrap;
          overflow: hidden;
          padding: 5px;
          border-radius: 20px;
          background-color: map-get($colors, secondary);
      }
  }
  </code></pre>
  
  <p>Unfortunately, it's not quite there yet and looks like this in the browser:</p>
  
  <p><a href="https://i.stack.imgur.com/p4oNq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p4oNq.png" alt="Incorrect progress bar"></a></p>
  
  <p>I would like to show the green part (percentage full) from the bottom and not from the top of the outer div.</p>
  
  <p>Any help would be much appreciated, I am still pretty horrible at CSS and Sass, but trying to get better through tutorials.</p>
  
  <p>Edit*</p>
  
  <p>The HTML is as follows:</p>
  
  <pre><code>&lt;div class="progress-outer"&gt;
      &lt;div class="progress-inner" [style.height]="Level + '%'"&gt;
          {{Level}}%
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>