How to set equal height for divs with different titles and be responsive for every mobile screen

Question

I try to set equal height for divs in order to be responvise on alls screens.

my html

<div class="statscont">
<div class="homecatback">
<img class="catimage" src=...><div class="homecat">βιβλία</div></div>
<div class="homecatback">
<img class="catimage" src=...><div class="homecat">ταινίες</div></div>
<div class="homecatback">
<img class="catimage" src=...><div class="homecat">ταινίες μικρού μήκους</div></div>
<div class="homecatback">
<img class="catimage" src=...><div class="homecat">φαγητό</div></div>
<div class="homecatback">
<img class="catimage" src=...><div class="homecat">θέατρο</div></div>
<div class="homecatback">
<img class="catimage" src=...><div class="homecat">σειρές</div></div>

my css

.homecatback { text-align: center; width: 45%; float: left; }
img.catimage {width: 100px; height: 100px;}
.homecat {}

You can see in the photo that a big title breaks the layout.

However, if set .homecat {height:60px;} it will work.

But it is a good solution for css and responsiveness?

Also image should have a fix size?

This is working for screens 415 px but not for 375px.

Thank you