In Angular9's mat-table, how do I enforce that DIVs within a mat-cell start new lines?

Question

I'm using Angular 9. I have defined a very simple mat-table element ...

<mat-table #table [dataSource]="dataSource">
  <ng-container matColumnDef="article">
    <mat-cell *matCellDef="let article_stat">
      <div>Hello</div>
      <div>Good-bye</div>
    </mat-cell>
    </ng-container>
</mat-table>

These are the only styles I have in the component ...

.mat-row {
  border-bottom: 1px solid;
}

.mat-cell {
  padding-top: .5em;
  padding-bottom: .5em;
}

However, when my table renders, the two different DIVs are aligning on the same horizontal plane.

I thought DIVs were supposed to wrap to different lines, especially since I haven't applied any additional styles, but I'm not sure what else I need to do to restore the original DIV behavior.

Edit: Per the answer, I tried this

<mat-cell *matCellDef="let article_stat">
<div class="smallHeading">
{{ article_stat.article.path }}
</div>
<div class='mainRow'>
...
</div>
</mat-cell>

with css

.smallHeading, .mainRow {
  display: flex;
  flex-direction: column;
}

but still the DIVs appear on the same horizontal line.

Answer 1

You are using the mat-table and mat-cell directives incorrectly.

You need to place the directives as attributes on vanilla table and td elements.

<table mat-table #table [dataSource]="dataSource">
  <ng-container matColumnDef="article">
    <td mat-cell *matCellDef="let article_stat">
      <div>Hello</div>
      <div>Good-bye</div>
    </td>
    </ng-container>
</table>

Now, you cell content will be placed on separate lines :)

See for more info: https://material.angular.io/components/table/examples