2 угловые материальные карточки рядом друг с другом?

Question

Я хочу, чтобы две угловые карты материала были рядом, но я не знаю как.

HTML

<mat-card id="moth-card">
  <mat-card-title>Live Stats</mat-card-title>
  <app-card></app-card>
  <app-card></app-card>
</mat-card>

В данный момент второй находится под первым.

Answer 1

Попробуйте ниже CSS:

display: inline-block;

HTML-код:

<mat-card id="moth-card">
  <mat-card-title>Live Stats</mat-card-title>
 <mat-card class="inline-block">
   Part 1
 </mat-card>
 <mat-card class="inline-block">
   Part 2
 </mat-card>
</mat-card>

CSS:

.inline-block {
  display: inline-block;
}

Working_Demo