Как сделать заголовок и дату в одной строке в angular материале

Question

У меня есть заголовок и дата, но теперь они выглядят так:

title
date

, но это должно быть: дата заголовка.

 <mat-card-header>
      <mat-card-title  >
        <span [innerHTML]="item.title | highlight : searchQuery"></span>
        <span class="spacer"></span>
        <span>
          <a mat-icon-button [routerLink]="['../', dossier.id , 'item', item.id]" i18n-title title="Edit">
            <mat-icon>edit</mat-icon>
          </a>
        </span>
      </mat-card-title>

      <mat-card-subtitle >
        <span *ngIf="!createdAtEqualsDate(item)">{{item.date | date: 'shortDate'}} <ng-template i18n>created</ng-template></span>
        <span>{{item.createdAt | date: 'short'}}</span>
        <span *ngIf="item.createdAt !== item.lastModifiedAt"><ng-template i18n>modified</ng-template> {{item.lastModifiedAt | date: 'short'}}</span>
      </mat-card-subtitle>
    </mat-card-header>

css:

mat-card-header{
  justify-content: center;
}

Итак, я имею в виду, что заголовок карты и субтитр карты находятся на одной строке, а не друг под другом

Я попробовал этот пример https://jsfiddle.net/VanessaRC/Lz9vz6bs/1/ , Но это не исправляет это. Поскольку у меня есть заголовок карты матов

oke, он у меня теперь такой:

 <mat-card-header>
      <mat-card-title>
        <span [innerHTML]="item.title | highlight: searchQuery"></span>
        <span class="spacer"></span>

      </mat-card-title>

      <div class="title-date">

        <span *ngIf="!createdAtEqualsDate(item)"
          >{{ item.date | date: 'shortDate' }}<ng-template i18n>created</ng-template></span
        >
        <span>{{ item.createdAt | date: 'short' }}</span>
        <span *ngIf="item.createdAt !== item.lastModifiedAt"
          ><ng-template i18n>modified</ng-template> {{ item.lastModifiedAt | date: 'short' }}</span
        >

      </div>

      <span>
        <a mat-icon-button [routerLink]="['../', dossier.id, 'item', item.id]" i18n-title title="Edit">
          <mat-icon>edit</mat-icon>
        </a>
      </span>
    </mat-card-header>

Но тогда дата находится слева от значка редактирования. Но это должно быть рядом с названием

Answer 1

Вы можете добавить это к своим стилям, вам нужно будет сделать немного больше корректировок

.mat-card-header-text{
    display: flex;
}

Answer 2

Вы также можете использовать

.mat-card-header-text{
    display: inline-block;
}

https://www.w3schools.com/css/css_inline-block.asp