How Do I Align Divs With Different Heights?
<p>I'm having trouble aligning my divs. My divs have no set height so they take the height of how much text is inside. </p>

<p>Here is a photo of what it looks like now.</p>

<p><a href="https://i.stack.imgur.com/Igmfk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Igmfk.png" alt="enter image description here"></a></p>

<p>Notice the prince post is aligned right and under that post is another post aligned under it. I can't seem to figure out what's going wrong in this.</p>

<p>Here is my html:</p>

<pre><code>&lt;div class="row" style="padding:30px 10px 30px 20px; margin:auto;  display:block;"&gt;

 &lt;div class="large-12 column large-columnz"&gt;
 &lt;a href="post url"&gt;&lt;img src=""&gt;&lt;/a&gt;
 &lt;div class="row column"&gt;The Title
 Article Excerpt&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Here is the css:</p>

<pre><code>.large-columnz {  
    max-width:560px;
    margin-bottom:10px;
    display: inline-block;
    vertical-align: top;
    *display: inline;
 }
</code></pre>

<p>I am using the <a href="http://foundation.zurb.com/sites/docs/v/5.5.3/css.html" rel="nofollow noreferrer">Foundation</a> responsive framework to design my site as well as my own incorporated css. </p>

<p>Can anyone tell me what I am doing wrong which causes the last two post to not align.</p>