From 42e6a67a819792ef2cc5dff667b6b4c6b2059c96 Mon Sep 17 00:00:00 2001
From: Jamie B <53781962+JamieB-gu@users.noreply.github.com>
Date: Mon, 10 Aug 2026 15:27:52 +0100
Subject: [PATCH] Election trackers `SideBySide`

Handles a common design pattern, where components are placed above one
another at narrower breakpoints and side-by-side at wider ones.
---
 .../ElectionTrackers/SideBySide.stories.tsx   | 39 +++++++++
 .../ElectionTrackers/SideBySide.tsx           | 80 +++++++++++++++++++
 dotcom-rendering/src/paletteDeclarations.ts   |  4 +
 3 files changed, 123 insertions(+)
 create mode 100644 dotcom-rendering/src/components/ElectionTrackers/SideBySide.stories.tsx
 create mode 100644 dotcom-rendering/src/components/ElectionTrackers/SideBySide.tsx

diff --git a/dotcom-rendering/src/components/ElectionTrackers/SideBySide.stories.tsx b/dotcom-rendering/src/components/ElectionTrackers/SideBySide.stories.tsx
new file mode 100644
index 00000000000..a9d6f9de193
--- /dev/null
+++ b/dotcom-rendering/src/components/ElectionTrackers/SideBySide.stories.tsx
@@ -0,0 +1,39 @@
+import { textEgyptian17Object } from '@guardian/source/foundations';
+import { allModes } from '../../../.storybook/modes';
+import preview from '../../../.storybook/preview';
+import { SideBySide as SideBySideComponent } from './SideBySide';
+
+const meta = preview.meta({
+	title: 'Components/Election Trackers/Side By Side',
+	component: SideBySideComponent,
+	parameters: {
+		chromatic: {
+			modes: {
+				'vertical mobileMedium': allModes['vertical mobileMedium'],
+				'vertical tablet': allModes['vertical tablet'],
+			},
+		},
+	},
+});
+
+export const SideBySide = meta.story({
+	args: {
+		from: 'tablet',
+		left: {
+			heading: 'Senate',
+			children: (
+				<p css={textEgyptian17Object}>
+					Some components on the left from the "tablet" breakpoint.
+				</p>
+			),
+		},
+		right: {
+			heading: 'House',
+			children: (
+				<p css={textEgyptian17Object}>
+					Some components on the right from the "tablet" breakpoint.
+				</p>
+			),
+		},
+	},
+});
diff --git a/dotcom-rendering/src/components/ElectionTrackers/SideBySide.tsx b/dotcom-rendering/src/components/ElectionTrackers/SideBySide.tsx
new file mode 100644
index 00000000000..4d2712c62ff
--- /dev/null
+++ b/dotcom-rendering/src/components/ElectionTrackers/SideBySide.tsx
@@ -0,0 +1,80 @@
+import {
+	type Breakpoint,
+	from,
+	headlineBold20Object,
+	headlineBold24Object,
+	space,
+} from '@guardian/source/foundations';
+import type { ReactNode } from 'react';
+import { palette } from '../../palette';
+
+type Props = {
+	/**
+	 * The breakpoint from which to place the components side-by-side.
+	 */
+	from: Breakpoint;
+	left: {
+		heading: string;
+		children: ReactNode;
+	};
+	right: {
+		heading: string;
+		children: ReactNode;
+	};
+};
+
+/**
+ * Handles a common design pattern, where components are placed above one
+ * another at narrower breakpoints and side-by-side at wider ones.
+ */
+export const SideBySide = (props: Props) => (
+	<div
+		css={{
+			[from[props.from]]: {
+				display: 'flex',
+			},
+		}}
+	>
+		<div
+			css={{
+				[from[props.from]]: {
+					flexBasis: '50%',
+					paddingRight: space[2],
+				},
+			}}
+		>
+			<Heading from={props.from}>{props.left.heading}</Heading>
+			{props.left.children}
+		</div>
+		<div
+			css={{
+				[from[props.from]]: {
+					flexBasis: '50%',
+					paddingLeft: space[2],
+					borderLeftStyle: 'solid',
+					borderLeftColor: palette('--election-tracker-border'),
+					borderLeftWidth: 1,
+				},
+			}}
+		>
+			<Heading from={props.from}>{props.right.heading}</Heading>
+			{props.right.children}
+		</div>
+	</div>
+);
+
+const Heading = (props: { children: string; from: Breakpoint }) => (
+	<h3
+		css={{
+			...headlineBold20Object,
+			paddingBottom: space[2],
+			paddingTop: space[4],
+			[from[props.from]]: {
+				...headlineBold24Object,
+				paddingTop: 0,
+			},
+		}}
+	>
+		{props.children}
+	</h3>
+);
diff --git a/dotcom-rendering/src/paletteDeclarations.ts b/dotcom-rendering/src/paletteDeclarations.ts
index b1400922251..0a9044d2cf8 100644
--- a/dotcom-rendering/src/paletteDeclarations.ts
+++ b/dotcom-rendering/src/paletteDeclarations.ts
@@ -7153,6 +7153,10 @@ const paletteColours = {
 		light: editorialButtonText,
 		dark: editorialButtonTextDark,
 	},
+	'--election-tracker-border': {
+		light: () => sourcePalette.neutral[86],
+		dark: () => sourcePalette.neutral[20],
+	},
 	'--email-signup-button-background': {
 		light: emailSignupButtonBackgroundLight,
 		dark: emailSignupButtonBackgroundDark,