Foundation flex box stretch alignment with text vertically centered - zurb-foundation

Question

I was doing the tutorial here: https://scotch.io/tutorials/get-to-know-the-flexbox-grid-in-foundation-6 and was trying the stretch here:
https://codepen.io/chrisoncode/pen/wMWEVE
<p class="text-center">Aligned Stretch (Columns are Equal Height)</p>
<div class="row align-stretch text-center">
<div class="columns">space</div>
<div class="columns">
<p>Look I'm a bunch of words. Spoiler alert for Star Wars: Jar Jar Binks is the new sith lord. He is Darth Darth Binks.</p>
</div>
</div>
body { padding-top:50px; }
.row { border:1px solid #FF556C; margin-bottom:20px; }
.columns { background:#048CB9; color:#FFF; padding:20px; }
.columns:first-child { background:#085A78;vertical-align:bottom }
.columns:last-child { background:#B3BBBB; }
On the 3rd example, using the stretch property, I am trying to get the text to vertically align middle and am having no luck. Can anyone tell me how to do it?
I tried adding .columns:first-child { background:#085A78;vertical-align:bottom } but that did not work.

Answer 1

HTML:
<p class="text-center">Aligned Stretch (Columns are Equal Height)</p>
<div class="row align-stretch text-center">
<div class="columns">
<div class="row align-center text-center"><p>space</p></div>
</div>
<div class="columns">
<p>Look I'm a bunch of words. Spoiler alert for Star Wars: Jar Jar Binks is the new sith lord. He is Darth Darth Binks.</p>
</div>
</div>
CSS:
div.row.align-stretch.text-center .columns {
display: flex;
justify-content: center;
align-items: center;
}
div.row.align-stretch.text-center .columns p {
margin: 0;
}

Answer 2

Flex children are equal height by default, unless you assign an align-items value other than stretch.
Therefor:
<div class="row align-stretch text-center">
Is the same as:
<div class="row text-center">
For your example, the simplest way is to use the .align-middle which will make the column the height of the content within and vertically center it to the taller column in the group.
Otherwise, you can make the column itself display: flex; and add align-items: center;