title: Align element on bottom of div with dynamic border (absolute position + margin)
body: <p>I´m currently trying to make an element with variable width and a border at it´s right. The border should always stay away a certain distance from the text elements, which vary in size and count. So the Border should move dynamically. It all works fine if I place my text elements inside the dynamic div but the text has to be positioned on the bottom of the page. So I tried to use <code>position: absolute; bottom: 0px; left: 0;</code>. But I learned due to the absolute positioning <code>margin</code> won´t work any further.</p>
  
  <p>You can find my code <a href="http://codepen.io/anon/pen/YqKZqV" rel="nofollow noreferrer">here on codepen.io</a>. The current state is the working dynamic border but with the text on the top side. I commented out the non working parts, which you can find on the bottom of the CSS file.</p>
  
  <p><strong>So what is a better/working way to position my text on the bottom of my div but also have a dynamic border on the right ?</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.statusbar {
    padding: 0;
    margin: 0;
    height: 150px;
    width: 50vw;
    background: #303030;
    color: white;
  }
  .statusbar .statusbar-content {
    width: calc(100vw - 48px);
    height: 150px;
    margin-left: 48px;
    float: left;
  }
  .statusbar .statusbar-content .statusbar-col {
    margin-top: 20px;
    margin-bottom: 20px;
    display: inline-block;
    float: left;
    border: none;
    border-right: 1px solid #505050;
    position: relative;
    height: 110px;
  }
  .statusbar .statusbar-content #appserver-col,
  .statusbar .statusbar-content #command-col,
  .statusbar .statusbar-content #connection-col {
    margin-left: 23px;
  }
  .statusbar .statusbar-content #connection-col {
    border: none;
  }
  .statusbar .statusbar-content .col-content {
    padding-right: 23px;
  }
  .statusbar .statusbar-content .content-row {
    position: relative;
    height: 110px;
  }
  .statusbar .statusbar-content .content-item {
    display: inline-block;
    margin-right: 23px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="statusbar"&gt;
    &lt;div class="statusbar-content"&gt;
      &lt;div class="statusbar-col" id="database-col"&gt;
        &lt;div class="col-content"&gt;
          &lt;div class="content-row"&gt;
            &lt;div class="content-item"&gt;Test_Text_1&lt;/div&gt;
            &lt;div class="content-item"&gt;Test_Text_2&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <hr>
  
  <p><strong>EDIT</strong></p>
  
  <p>The output should look like this in the end.
  <a href="https://i.stack.imgur.com/APtN5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/APtN5.png" alt="enter image description here"></a></p>