angular 4 angular-material mat-card in only row

Question

I need of place side by side in only row 2 mat-card.. how can I do?

<mat-card class="example-card">
  <mat-card-header>
    <div mat-card-avatar class="example-header-image"></div>
    <mat-card-title>Shiba Inu</mat-card-title>
    <mat-card-subtitle>Dog Breed</mat-card-subtitle>
  </mat-card-header>     
  <mat-card-content>        
  </mat-card-content>     
</mat-card>

I want to get this

Answer 1

You can use flex layout for this. https://alligator.io/angular/flex-layout/

Answer 2

You can add a style to your div :

<div style="display:flex; flex-direction: row;">
   <mat-card class="example-card">
      ...
   </mat-card>
   <mat-card class="example-card">
      ...
   </mat-card>
</div>