Equal height columns with centered content in flexbox
<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>