<article>
	<h1>Our pies</h1>
	<dl>
		<dt>Moo & Blue</dt>
		<dd>British beef steak & Stilton</dd>
		<dt>Kate & Sidney</dt>
		<dd>British beef steak, craft ale & kidney</dd>
		<dt>Heidi</dt>
		<dd>Goats’ cheese, sweet potato & spinach</dd>
		<dt>Wild Shroom</dt>
		<dd>Portobello & chestnut mushroom with asparagus & white wine</dd>
		<dt>Kevin</dt>
		<dd>Chestnut mushroom, tomato & quinoa with baby onions & thyme</dd>
	</dl>
</article>
* {
	box-sizing: border-box;
}

body {
	font-family: "Open Sans", sans-serif;
	margin: 0;
	padding: 1rem;
}

h1, dl {
	margin: 0;
}

article {
	max-width: 70rem;
	margin: 0 auto;
	border: 0.18rem solid lightgrey;
	padding: clamp(1rem, 2vw, 3rem);
	border-radius: 0.5rem;
}

article > * + * {
	margin-top: 1rem;
}

dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.5rem 0;
}

dl > * {
	background: antiquewhite;
	padding: 1rem;
}

dl > :nth-of-type(2n) {
	background: lavenderblush;
}

dt {
	font-weight: 700;
	font-size: 1.3rem;
}

dd {
	margin: 0;
	padding: 1rem;
	display: flex;
	align-items: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.