I am facing an issue with ensuring both p-card elements have the same height, where the smaller one aligns to the height of the bigger one.
https://i.sstatic.net/Mfnlr.png
Is there a way to achieve this using the code below:
parent.component.html
<div class="container">
<div class="row">
<div class="col-6">
<homepage-card header_name="XX"></homepage-card>
</div>
<div class="col-6">
<homepage-card header_name="YY"></homepage-card>
</div>
</div>
</div>
homepage-card.component.html
<p-card>
<ng-template pTemplate="header">
<div class="header_style">
{{ header_name }}
</div>
</ng-template>
<div *ngIf="header_name == 'XX'; else yy_template">
<progress-comp class="prog_bar" *ngFor="let item of import_name_xx" [item]="item"></progress-comp>
</div>
<ng-template #yy_template>
<progress-comp class="prog_bar" *ngFor="let item of import_name_yy" [item]="item"></progress-comp>
</ng-template>
<ng-template pTemplate="footer">
<p-button icon="pi pi-angle-double-down" label="Do"></p-button>
</ng-template>
</p-card>