title: Align left and right in mat-card-title
body: <p>Using the following code in <code>Angular 5</code>:</p>
  <pre><code>  &lt;mat-card&gt;
        &lt;mat-card-title&gt; Test message &lt;/mat-card-title&gt;
    &lt;/mat-card&gt;
  </code></pre>
  <p>I get this:
  <a href="https://i.stack.imgur.com/1zQQ6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1zQQ6.png" alt="One text" /></a></p>
  <p>How can I get this (some text is left-aligned, some text is right-aligned)?
  <a href="https://i.stack.imgur.com/W0ur9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/W0ur9.png" alt="enter image description here" /></a></p>
  <p>I tried creating <code>div</code> and put inside paragraphs with predefined <code>css</code> but it didnot work out.</p>