Я работаю с мат-картой в списке, и у меня есть проблема с надписью
Вот что у меня есть: 
Вот что я хочу: 
Проблема заключается в том, что при увеличении размера содержимого внутри матовой карты следующая матовая карта должна автоматически корректировать пространство, не оставляя пробела, соответствующего предыдущему большему Space Mat-Card
Я прилагаю соответствующие css и html Код:
.works {
padding-left: 47px;
padding-top: 99px;
// display: inline-flex;
}
.work-head {
// width: 330px;
// height: 28px;
font-family: Raleway-SemiBold;
font-style: normal;
font-weight: 500;
font-size: 24px;
line-height: 28px;
// text-align: center;
color: #000000;
}
.work-list {
// width: 123px;
// height: 28px;
padding-left: 0px;
text-align: right;
padding-top: 23px;
font-family: Raleway-Medium;
font-style: normal;
font-weight: normal;
font-size: 24px;
line-height: 28px;
// text-align: center;
color: #000000;
}
.work-list1 {
// width: 123px;
// height: 28px;
text-align: right;
padding-top: 23px;
font-family: Raleway-Medium;
font-style: normal;
font-weight: normal;
font-size: 24px;
line-height: 28px;
// text-align: center;
padding-left: 49px;
color: #000000;
}
.work-detail {
// width: 159px;
// height: 28px;
padding-left: 0px;
text-align: left;
padding-top: 23px;
font-family: Raleway;
font-style: normal;
font-weight: 300;
font-size: 24px;
line-height: 28px;
// text-align: center;
color: #000000;
}
.flexfix {
flex-basis: 0;
}
.work-card {
// margin-right: 26px;
margin-bottom: 26px;
padding-top: 39px;
padding-left: 17px;
padding-bottom: 49px;
padding-right: 10px;
width: 506px;
// height: 244px;
background: #FFFFFF;
border: 1px solid #E5E5E5;
box-sizing: border-box;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.04);
}
.card-margin{
margin-left: 3%;
}
<div class="works">
<div fxLayout="row layout-wrap">
<div *ngFor="let item of listOfProjects" class="card-margin">
<mat-card class="work-card">
<mat-card-title class="work-head">{{item.name}}</mat-card-title>
<img class="line-align" src="assets/icons/DashBoard/work-card-line.svg" />
<mat-card-content>
<div *ngIf="item.name==='test10'">
<div fxLayout="row" fxLayoutGap="20px">
<div class="work-list">Contractor:</div>
<div class="work-detail">{{item.baseEntityByContractor.entityName}}</div>
</div>
<div fxLayout="row" fxLayoutGap="20px">
<div class="work-list">Contractor:</div>
<div class="work-detail">{{item.baseEntityByContractor.entityName}}</div>
</div>
</div>
<div fxLayout="row" fxLayoutGap="20px">
<div class="work-list">Contractor:</div>
<div class="work-detail">{{item.baseEntityByContractor.entityName}}</div>
</div>
<div fxLayout="row" fxLayoutGap="20px">
<div class="work-list1">Status:</div>
<div class="work-detail">{{item.projectStatus.name}}</div>
</div>
</mat-card-content>
</mat-card>
</div>
</div>
</div>