title: direction : rtl doesn't work with angular material cards?
body: <p>I'm using angular material cards and want to make text start from right to left , so i used direction: rtl; but it wasn't work .
  any help ? 
  HTML Code : </p>
  
  <pre><code>&lt;mat-card class="example-card"&gt;
     &lt;mat-card-header&gt;
       &lt;div mat-card-avatar class="example-header-image"&gt;&lt;/div&gt;
          &lt;mat-card-title&gt;
           &lt;button class="profilrButton" (click)="viewProfile(post.uid)"&gt;{{post.fullName}}&lt;/button&gt;
          &lt;/mat-card-title&gt;
          &lt;mat-card-subtitle&gt;
            &lt;p wrapper&gt;{{post.title}} &lt;/p&gt;
          &lt;/mat-card-subtitle&gt;
        &lt;mat-card-subtitle style="float: right;font-size: 8pt"&gt;{{arr[ind]['date']}}&lt;/mat-card-subtitle&gt;
    &lt;/mat-card-header&gt;
  
    &lt;img mat-card-image src={{post.imageURL}} alt="Photo of a Shiba Inu"&gt;
    &lt;mat-card-content&gt;
       &lt;p [class]="(hasArabic(post.description))? 'pre rtl':'pre'"&gt;
         {{post.description}}
       &lt;/p&gt;
    &lt;/mat-card-content&gt;
    &lt;mat-card-actions&gt;
       &lt;button class="classA" (click)="approve(post.key,ind)" mat-button&gt;Accept&lt;/button&gt;
       &lt;button class="classR" (click)="delete(post.key,ind)" mat-button&gt;Reject&lt;/button&gt;
    &lt;/mat-card-actions&gt;
  &lt;/mat-card&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.pre{
   white-space: pre-line;
  }
  .rtl{
   direction: rtl;
  }
  </code></pre>