prevent columns with text from wrapping in Foundation App - zurb-foundation

Question

I have 3 columns that I want to keep side-by-side. They work as expected with a short title. However, once I put text into the columns they end up one per row instead. How do I force the text to wrap so that the columns remain side-by-side?
<div class="grid-block align-center">
<div class="grid-content">
<p class="text-center">
Less Stress
</p>
<p class="text-center">
Some very long text here.
</p>
</div>
<div class="grid-content">
<p class="text-center">
Less Work
</p>
<p class="text-center">
Some very long text here.
</p>
</div>
<div class="grid-content">
<p class="text-center">
More Profit
</p>
<p class="text-center">
Some very long text here.
</p>
</div>
</div>

Answer 1

Although the new Foundation App framework uses Flexbox, it still has a helper class using the more familiar 'medium-x' nomenclature. Therefore, the following code works, based on a 12-column grid which can be changed to any quantity of columns desired.
<div class="grid-block align-center">
<div class="grid-content large-4">
<h2 class="text-center">Less Stress</h2>
<p class="text-center">
Stop stressing about paperwork, monitoring xxx and xxx, tracking xxx and revenue, trying to stay on top of all operations. XXX takes all the stress away.
</p>
</div>
<div class="grid-content large-4">
<h2 class="text-center">Less Work</h2>
<p class="text-center">
Work less by getting rid of paperwork and streamlining your operations. Life's so much easier because XXX does all the work for you.
</p>
</div>
<div class="grid-content large-4">
<h2 class="text-center">More Profit</h2>
<p class="text-center">
Save money by eliminating paper and data-entry errors, and lowering operational costs. Increase revenue with more accurate billing, faster billing cycles and more time for customers. XXX makes you more profitable.
</p>
</div>
</div>