Looking at the image below, I am attempting to align "Ticket Number" and "Email" using a Grid:
<Grid
container
direction="row"
justifyContent="flex-start"
alignItems="stretch"
style={{ padding: "1.5em" }}
>
<div>
<span>ID</span>
<p style={{ color: "gray" }}>{props._id}</p>
</div>
<div>
<span>Ticket Number</span>
<p style={{ color: "gray" }}>{props._id}</p>
</div>
</Grid>
<Grid
container
direction="row"
justifyContent="space-between"
alignItems="center"
style={{ padding: "1.5em" }}
>
<div>
<span>Date of Birth</span>
<p style={{ color: "gray" }}>{props.birthdate}</p>
</div>
<div>
<span>Email</span>
<p style={{ color: "gray" }}>{props.email}</p>
</div>
<div>
<span>Phone</span>
<p style={{ color: "gray" }}>{props.phone}</p>
</div>
</Grid>How can I align both rows?