I am struggling to position/ remove whitespace from duplicate components

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>