Space between when sent time, from, and subject in email summary

This is the first time I'm creating some custom style. There's probably
a way to do this with Bootstrap that I'm not expert enough to know
about.

For now I'm just scratching itches.

src/EmailSummary.tsx

@@ -4,9 +4,11 @@ import ButtonGroup from "react-bootstrap/ButtonGroup";
 import ButtonToolbar from "react-bootstrap/ButtonToolbar";
 import Placeholder from "react-bootstrap/Placeholder";
 import React from "react";
+import Stack from "react-bootstrap/Stack";
 
 import Client from "./client/Client";
 import DateTime from "./components/DateTime";
+import EmailFrom from "./components/EmailFrom";
 import { IAccount, IEmailStub, IMailbox } from "./client/types";
 
 type EmailSummaryProps = {
@@ -49,17 +51,18 @@ class EmailSummary extends React.Component<
 			return <Placeholder />;
 		}
 		return (
-			<div className="p-2 border" key={this.props.emailId}>
+			<Stack
+				direction="horizontal"
+				className="email-summary"
+				key={this.props.emailId}
+			>
+				<DateTime className="received" d={stub.receivedAt} />
+				<EmailFrom froms={stub.from} />
+				<div>{stub.from == null ? "?" : stub.from[0].name}</div>
 				<a className="btn" href={href}>
-					<DateTime d={stub.receivedAt} />
-					<span>
-						{" - " +
-							(stub.from == null ? "?" : stub.from[0].name) +
-							" - " +
-							stub.subject}
-					</span>
+					<div>{stub.subject}</div>
 				</a>
-				<ButtonToolbar>
+				<ButtonToolbar className="ms-auto">
 					<ButtonGroup className="me-2">
 						<Button
 							onClick={() => {
@@ -74,7 +77,7 @@ class EmailSummary extends React.Component<
 						<Button>2</Button>
 					</ButtonGroup>
 				</ButtonToolbar>
-			</div>
+			</Stack>
 		);
 	}
 }