How to make tiles for the main page?

Question

opencart

Hello, is it right to make tiles for the main page? How to determine the height of the entire tile and the height of the blocks for the header and preview?
Initially, I will say that I cut the preview text under the tile using line-height: 25px; max-height:calc(25px * 3); It seems to me that this is the most convenient than using cropping by the number of characters, since at any resolution the preview text always has 3 lines.
But the question is different, for each page the length of the header is different, and depending on its length in the tile, it is displayed differently, either in one line or in two, because the tile increases in height.
If you make a fixed height calculated for different headings and use overflow:hidden, then in principle it looks normal.
BUT when the screen narrows, the title "presses on the text" and the bottom line of the text is cut off ugly, if you use auto height, then the blocks fall apart, as they become different lengths,
Similar picture, there is nothing to show yourself yet: https://yadi.sk/i /FY4prVgm3KiEBB

Answer 1

That is, in the fifteenth line, this thing

$this->config->get('module_sms_alert_processing_status')

returns not an array, but null.
This is what needs to be corrected.
Add additional check in place or see what's inside this config->get

Answer 2

Use flexbox.
The alternative is to count the height in js.
When narrowing the screen, use media conditions and rearrange the blocks.
More - only with your code on jsfiddle.net