How to make title and date on one line in angular material - css

Question

I have a title and date , but they are looking now like this:
title
date
but it has to be: 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;
}
So what I mean is that card-title and card-subtitle are on the same line and not under each other
I tried this example https://jsfiddle.net/VanessaRC/Lz9vz6bs/1/. But that doesnt fix it. Because I have a mat-card-header
oke, I have it now like this:
<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>
But then the date is on the left side next to the edit icon. But It has to be next to the title

Answer 1

You can add this to your styles, you will need to make a little more adjustments
.mat-card-header-text{
display: flex;
}

Answer 2

You could also use
.mat-card-header-text{
display: inline-block;
}
https://www.w3schools.com/css/css_inline-block.asp