I am struggling to position/ remove whitespace from duplicate components - html

Question

Here you will see the start of the NotesFromCoachesForWrestlers component circled
The problem is When the notes on the component on the left increase the component on the right adds whitespace which I don't want, if anything I would want it at the bottom of the component.
PLease note so far I have tried:
position: relative and top: 0 on the containing div
It seems the card div with class card-body is growing
Even if I set the div to have a height of 50px it still grows tho
<div className="col-12">
<div className="d-flex flex-wrap justify-content-around">
<div className="card my-1 p-1 col-sm-12 col-md-6" style={{ border: "1.3px solid black" }}>
<div className="card-body">
<GradingDashboardMadeByLuke UID={wrestler1UID} />
<div
className="card-text"
style={{ color: "black", fontSize: "smaller" }}
>
The previous 5 Logins for {props.wrestler1FullName} were:{" "}
{allLoginsForWrestler1.map((login) => {
return (
<p>
<Moment fromNow>{login.login_was_created_at}</Moment> -{" "}
</p>
);
})}
</div>
</div>
<div>
<NotesFromCoachesForWrestlers UID={wrestler1UID} />
<SubmitNoteForWrestler
wrestlerID={wrestler1UID}
wrestlerFullName={props.wrestler1FullName}
/>
</div>
</div>
<div
className="card my-1 p-1 col-sm-12 col-md-6"
style={{ border: "1.3px solid #ff7824" }}
>
<div className="card-body">
<h5 className="card-title">
<strong>{/*{props.first_name} {personalInfo.last_name}*/}</strong>
</h5>
<GradingDashboardMadeByLuke UID={wrestler2UID} />
<div
className="card-text"
style={{ color: "black", fontSize: "smaller" }}
>
The previous 5 Logins for {props.wrestler2FullName} were:{" "}
{allLoginsForWrestler2.map((login) => {
return (
<p>
<Moment fromNow>{login.login_was_created_at}</Moment> -{" "}
</p>
);
})}
</div>
</div>
<div className="mb-auto">
<NotesFromCoachesForWrestlers UID={wrestler2UID} />
<SubmitNoteForWrestler
wrestlerID={wrestler2UID}
wrestlerFullName={props.wrestler2FullName}
/>
</div>
</div>
</div>
</div>