css - make content inside divs display in the same locations -

i have page displays products on website inside boxes (https://s21.postimg.io/9nw7kqrfb/screen_shot_2016_09_12_at_22_27_46.png)

but data inside boxes not displaying in same locations in each box if image small.

if make each box set height, how can make product title , price display @ bottom of box under each other each both same?

html 1 box:

<li class="post-2483 product type-product status-publish has-post-thumbnail product_brand-mikrotik product_cat-routers  instock featured taxable shipping-taxable purchasable product-type-simple">     <a href="#" class="woocommerce-loopproduct-link"><span class="et_shop_image"><img width="300" height="180" src="#" class="attachment-shop_catalog size-shop_catalog wp-post-image" alt="mikrotik-rb2011" title="mikrotik-rb2011"><span class="et_overlay"></span></span><h3>mikrotik rb2011 advanced wi-fi router</h3>     <span class="price"><span class="woocommerce-price-amount amount"><span class="woocommerce-price-currencysymbol">£</span>109.00</span> <small class="woocommerce-price-suffix">ex vat</small></span> </a></li> 

i suggest using jquery equalize height of spans et_shop_image class name.

$(document).ready(function(){   var maxheight=0;   $(".et_shop_image").each(function(){   if ($(this).height()>maxheight){maxheight=$(this).height()}   });    $(".et_shop_image").height(maxheight); }) 

also make sure class et_shop_image has display:inline-block or block

if can not use javascript , using html 5 , check flexbox. need revise html codes too.