All Columns in a row not the same size

Question

I'm using the following code to list all my products on a website. The problem is that on some lines the title is displayed over two lines, then the next 3 columns doesn't display properly. Please con someone quide me in correcting this.

So it will display

<div class="container">
  <div class="row space">         
            <c7-products>
               <div class="col-md-4 col-sm-4 text-center wine-post">
                   <p><c7-product-image size="small"></p>
                   <p><c7-product-title></p>
                   <p><c7-product-wine-vintage></p>
                      <c7-if !product-wine-vintage>
                         <p>NV</p>
                      </c7-if>
                   <p><c7-product-add-to-cart></p> 
               </div>
            </c7-products>      
  </div>
</div>