Struggling with creating cards of equal size.
I have been trying different solutions like using h-xxx, align-items-stretch, and Height:100% but still unable to make my cards have the same size or height in this case.
This is my current code:
<div class="content">
<div class="container-fluid" style=" height:360px">
<div class="row align-items-stretch ">
<!-- PROJECT DETAILS -->
<div class="card h-100 w-40 ml-3" id="details" *ngFor="let c of projectf">
<div class="card-header" align="center">
<h4 class="title">{{c.projectname}}</h4>
</div>
<div class="container ">
<div class="row">
<!-- More HTML code here -->
<div class="form-group col-md-6">
<label for="FechaIP">Start Date</label>
<input type="text" value="{{c.startdate | date: 'yyyy-MM-dd'}}" class="form-control btn-outline-secondary"
disabled id="StartDate">
</div>
<div class="form-group col-md-6">
<label for="FechaCP">End Date</label>
<input type="text" value="{{c.enddate | date: 'yyyy-MM-dd'}}" class="form-control btn-outline-secondary"
disabled id="EndDate">
</div>
</div>
<div class="row justify-content-center">
<div class="form-group ">
<label>Platform</label><br />
<select class="btn btn-outline-secondary" disabled style="border-color:rgba(165, 157, 157, 0.664)">
<option *ngIf="c.type=='USSD'" value="1">USSD</option>
<option *ngIf="c.type=='SMS'" value="1">SMS</option>
</select>
</div>
</div>
</div>
</div>
<!-- TEST CASES-->
<div class="card h-100 ml-3 d-flex " id="card">
<div class="card-header" align="center">
<p class="text-muted">Created Test Cases</p>
</div>
<div id="table" class="table-responsive text-nowrap" style="overflow:auto;">
<table class="table table-hover">
<!-- Table content -->
</tbody></table>
</div>`;
When I add more items to my table, it starts to grow and exceed the height of the left card. If I set a static height, the card loses its responsive feature