title: positioning div to bottom of parent div
body: <p>Hello I hope someone can help me with this rather, I guess, simple question. </p>
  
  <p>Why is the <code>div</code> with content €1.230 not aligned at the bottom of the <code>chart-p</code> div?</p>
  
  <p>The desired behaviour is that the whole <code>chart-r</code>is positioned to the bottom. So that the white space is above the <code>div</code> instead of below.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.chart-p {
      width: 300px;
      display: block;
      height: 236px;
      position: relative;
      background-color: lightblue;
  }
  .chart-r {
      margin-right: 1.5%;
      background-color: #E5F1F9;
  }
  .chart-r, .chart-z {
      display: inline-block;
      width: 48%;
      background-color: #FEE9A9;
      position: relative;
      top: 0px;
      left: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="chart-p"&gt;
    &lt;div class="chart-r" style="height:115px;"&gt;
      € 1.230&lt;/div&gt;
    &lt;div class="chart-z" style="height:236px;"&gt;
      € 2.280&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>