Angular Material md-card-title-text has height of 0
<p>I'm trying to figure out why my <code>md-card-title-text</code> Doesn't render right,
I don't have any extra css on it, just default angular-material</p>

<p>I'm using te following code to show it:</p>

<pre><code>&lt;md-card&gt;
    &lt;md-card-header&gt;
        &lt;md-card-avatar&gt;
            &lt;img class="md-user-avatar" src="https://material.angularjs.org/HEAD/img/100-2.jpeg" /&gt;
        &lt;/md-card-avatar&gt;
        &lt;md-card-header-text&gt;
            &lt;span class="md-title"&gt;User&lt;/span&gt;
            &lt;span class="md-subhead"&gt;subhead&lt;/span&gt;
        &lt;/md-card-header-text&gt;
    &lt;/md-card-header&gt;
    &lt;md-card-title&gt;
        &lt;md-card-title-text&gt;
            &lt;span class="md-headline"&gt;In-card mixed actions&lt;/span&gt;
            &lt;span class="md-subhead"&gt;Reversed&lt;/span&gt;
        &lt;/md-card-title-text&gt;
    &lt;/md-card-title&gt;
    &lt;md-card-content&gt;
        &lt;p&gt;
            The titles of Washed Out's breakthrough song and the first single from Paracosm share the two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
        &lt;/p&gt;
    &lt;/md-card-content&gt;
    &lt;md-card-actions layout="row" layout-align="start center"&gt;
        &lt;md-button&gt;Action 1&lt;/md-button&gt;
        &lt;md-button&gt;Action 2&lt;/md-button&gt;
        &lt;md-card-icon-actions&gt;
            &lt;md-button class="md-icon-button" aria-label="toggle"&gt;
                &lt;md-icon md-svg-icon="md-toggle-arrow"&gt;&lt;/md-icon&gt;
            &lt;/md-button&gt;
        &lt;/md-card-icon-actions&gt;
    &lt;/md-card-actions&gt;    
&lt;/md-card&gt;
</code></pre>

<p>here is a screenshot showing the issue:</p>

<p><a href="https://i.stack.imgur.com/6jlzF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6jlzF.png" alt="Screenshot"></a></p>