Я хотел бы иметь два столбца одинаковой высоты, и их содержимое должно быть выровнено по центру, поэтому в самом центре каждого элемента div.

Проблема: «равный рост» и «выравнивание по центру», кажется, исключают самих себя, одно не работает с другим.

Вопрос: Как я могу создать строку с двумя столбцами разной ширины, одинаковой высоты и их содержимым по центру в середине каждого столбца?

<!-- 'middle aligned' and 'equal height' don't like each other ? -->
<div class="ui equal height center aligned grid">
    <div class="row">
        <div class="twelve wide purple column">
        <p>Text Text Text</p>
        <p>Text Text Text</p>
        <p>Text Text Text</p>
        <p>Text Text Text</p>
        </div>
        <div class="four wide red column  middle aligned">
            <div class="row">Forward</div>

        </div>
    </div>
</div>

http://jsfiddle.net/kjjd66zk/1/