title: How to align multiple descriptions in mat-panel
body: <p>I'm trying to make the descriptions look more aligned in my mat-panel. If one field is longer than the other, it pushes everything to the right. How can I make the descriptions stay all aligned with each other?</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-accordion&gt;
    &lt;mat-expansion-panel [expanded]="allExpandState"&gt;
      &lt;mat-expansion-panel-header&gt;
        &lt;mat-panel-title&gt;
          Account #: {{accountNumber}}
        &lt;/mat-panel-title&gt;
        &lt;mat-panel-description&gt;
          {{type}}
        &lt;/mat-panel-description&gt;
        &lt;mat-panel-description&gt;
          {{date}}
        &lt;/mat-panel-description&gt;
        &lt;mat-panel-description&gt;
          {{value}}
        &lt;/mat-panel-description&gt;
      &lt;/mat-expansion-panel-header&gt;
    &lt;/mat-expansion-panel&gt;
    &lt;!-- ... --&gt;
  &lt;/mat-accordion&gt;
  </code></pre>
  
  <p>How it looks now:</p>
  
  <p><a href="https://i.stack.imgur.com/V58sU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/V58sU.png" alt="Broken expansion panels"></a></p>