How to set overflow content to go underneath instead of fitting in one row

I have an XSL file set up:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://ift.tt/tCZ8VR">
<xsl:template name="homeArticleThumb" match="/">
    <xsl:for-each select="Collection/Content">
        <div class="setTableCell vertAlignT">
            <div class="articleTeaserHolder">
                <div class="imgHolder">
                    <xsl:variable name="imageSrc" select="Html/root/NewsArticle/artThumb/img/@src" />
                    <xsl:variable name="imageId">
                        <xsl:text>NewsArticle_</xsl:text>
                        <xsl:value-of select="ID" />
                        <xsl:text>_image</xsl:text>
                    </xsl:variable>
                    <xsl:variable name="contentTitle" select="Html/root/NewsArticle/artTitle" />
                    <a href="{QuickLink}" title="{Html/root/NewsArticle/artTitle}">
                        <img id="{ $imageId }" class="imgArtThumb" title="{ $contentTitle }" alt="{ $contentTitle }" src="{ $imageSrc }" />
                    </a>
                </div>
                <div class="textHolder">
                    <div class="textHolderTop">
                        <a href="{QuickLink}" title="{Html/root/NewsArticle/artTitle}" class="defaultLinks setBold">
                            <xsl:value-of select="Html/root/NewsArticle/artTitle"/>
                        </a>
                    </div>
                    <div class="textHolderBottom">
                        <xsl:value-of select="Html/root/NewsArticle/artTeaser" />
                    </div>
                </div>
            </div>
        </div>
    </xsl:for-each>
</xsl:template>
</xsl:stylesheet>

CSS:

.setTableCell
{
    display: table-cell;
}
.imgHolder
{
    float: left;
    display: inline-block;
    width: 43%;
    height: 100%;
    padding: 1% 2% 0 0;
}
.vertAlignT
{
    vertical-align: top;
}
.textHolder
{
    float: left;
    display: inline-block;
    width: 55%;
    height: 100%;
}
.textHolderTop
{
    width: 100%;
    height: 48%;
    text-align: left;
    padding-bottom: 2%;
    overflow: hidden;
}
.textHolderBottom
{
    width: 100%;
    height: 46%;
    overflow: hidden;
    text-align: left;
    padding-top: 2%;
    padding-bottom: 2%;
}


@media only screen and (max-width: 820px) {
    .setTableCell {
        display: block;
    }
}

I call the above XSL using this line:

<CMS:Collection ID="id123" runat="server" DefaultCollectionID="128" DisplayXslt="art.xsl" GetHtml="true" />

Displays this:

In the future I might need to add more contents to that collection so instead of 4 articles it might be 6 or 7 or... as many number of articles.

How can I modify the XLS file so that it will always display two article per row and go to the next row for the next two and next row for the next two and so forth.