term-container.component.html

<div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutAlign="start stretch">
    <mat-card class="term-container" *ngFor="let term of terms" fxFlex="33%">
        <div fxLayout="row" fxLayoutAlign="space-between stretch">
          <h2>{{ term.termCode | getTermDescription }}</h2><p class="text-right semi-bold">Credits: 13</p>
        </div>
    </mat-card>
</div>