I need to make a bordered box with multiple elements in CSS - css

Question

I need to create a box like this:
It is a React App. I have the elements - Name, Email, Avatar, etc.. and although I have all the data displayed within a rounded-cornered box at the moment, how do I get the text and image aligned up as per the image?
This is what I have at present:
The page displaying the items is:
import { Card } from "react-bootstrap";
import React, { useState } from "react";
import "./UsersItems.css";
import "./styles/candour.css";
export default function UsersItems(props) {
function createCard(user) {
return (
<Card key={user.id} className="user-card">
<Card.Body>
<Card.Img variant="bottom" src={user.avatar} />
<Card.Title>
{user.first_name} {user.last_name}{" "}
</Card.Title>
<Card.Link> {user.email}</Card.Link>
</Card.Body>
</Card>
);
}
let usersData = props.users;
let usersDivs = usersData.map(createCard);
return (
<div>
<div className="users-items">{usersDivs}</div>
</div>
);
}
and the CSS is:
#import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:regular,bold,italic&subset=latin,latin-ext");
.card-body {
display: flex;
flex-direction: column;
align-items: left;
padding: 30px 39px 30px 30px;
gap: 24px;
isolation: isolate;
width: 394px;
/* White */
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.25);
border-radius: 10px;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
/* Auto layout */
background: linear-gradient(
to right,
#0057ff,
#0057ff 65px,
white 60px,
white 100%
);
}
.card-img-bottom {
width: 59px;
height: 59px;
/* Warm light grey */
border: 5px solid #f8f7f6;
border-radius: 50%;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
z-index: 1;
text-align: left;
}
.card_title {
height: 21px;
/* Title case */
font-family: "Open Sans";
font-style: normal;
font-weight: 600;
font-size: 21px;
line-height: 28px;
/* or 133% */
/* Dark Blue */
color: #132350;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
}
.card-link {
height: 15px;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 21px;
color: #59678e;
}
I thought I was pretty good at CSS but clearly not! Any help would be greatly appreciated.