Unwanted gap above some cards

So, i was trying to make a grid of cards, and a very stange gap appeared above some of the cards that have a line break in their title. When i decrease the font size, the gap gets smaller, and if i remove some text, so that there's no line break, the gap disappears.

This does not always happen, for example when all of the cards have a line break or when there's some number of columns in the grid (which is different depending on which cards have a line break in their title) but i've made a very simple example where it occurs. In this example, it does not happen when there's only one or two columns in the grid, increase the width of the document to make more columns appear. This also only happens when the title container div has a fixed height.

Minimal example:
https://jsfiddle.net/AvocadoBoi/zyxr4tya/

I'm using MDL 1.3.0, the latest version right now.