title: Equal height columns with centered content in flexbox
body: <p>I'd like to have two columns of equal height and their content should be middle aligned, so in the very center of each div.</p>
  
  <p><strong>Problem:</strong> 'equal height' and 'middle aligned' seem to exclude themselves, the one doesn't work with the other.</p>
  
  <p><strong>Question:</strong> How can I create a row with two columns with different width, equal height and their content centered in the middle of each column?</p>
  
  <pre><code>&lt;!-- 'middle aligned' and 'equal height' don't like each other ? --&gt;
  &lt;div class="ui equal height center aligned grid"&gt;
      &lt;div class="row"&gt;
          &lt;div class="twelve wide purple column"&gt;
          &lt;p&gt;Text Text Text&lt;/p&gt;
          &lt;p&gt;Text Text Text&lt;/p&gt;
          &lt;p&gt;Text Text Text&lt;/p&gt;
          &lt;p&gt;Text Text Text&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="four wide red column  middle aligned"&gt;
              &lt;div class="row"&gt;Forward&lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/kjjd66zk/1/" rel="noreferrer">http://jsfiddle.net/kjjd66zk/1/</a></p>