title: Properly align content in columns
body: <p>That's a layout with which I'm currently dealing.</p>
  
  <p><a href="https://i.stack.imgur.com/e31SQ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e31SQ.jpg" alt="enter image description here"></a></p>
  
  <p>I don't have some consistent thoughts about how to properly align content in such columns. Paragraphs always shifted, also height of columns isn't full, guess that I'm missing something. Here is what do I have so far <a href="https://jsfiddle.net/scmk01jr/" rel="nofollow noreferrer">https://jsfiddle.net/scmk01jr/</a>.</p>
  
  <pre><code>html, body, .container {
    height: 100%;
  }
  
  .container {
      display:table;
      width: 100%;
      margin-top: -50px;
      padding: 50px 0 0 0;
      box-sizing: border-box;
  }
  
  .height-100 {
    height: 100%;
    display: table-row;
  }
  </code></pre>