title: Position divs with different on the bottom of parent div, next to eachother
body: <p>How can I position divs with different heights to the bottom of parent div, next to eachother. </p>
  
  <p>like I do in the code but alignment to the bottom.</p>
  
  <p>the divs represent tabs, where the red on is the current active tab and the grey ones non active tabs</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> .pane{
              position: relative;
              display: block;
              width: 500px;
              height: 120px;
              background-color: lightgrey;
          }
          .sec{
              position: absolute;
              bottom: 0px;
              display: inline-block;
              width: 35%;
              height: 80%;
              background-color: red;
              border-right: dashed;
  
          }
          .thir{
              float: left;
              width: 15%;
              height: 70%;
              display: inline-block;
              background-color: grey;
              border-right: dashed;
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="pane"&gt;
              &lt;div class="sec"&gt;&lt;/div&gt;
              &lt;div class="thir"&gt;&lt;/div&gt;
              &lt;div class="thir"&gt;&lt;/div&gt;
              &lt;div class="thir"&gt;&lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>