/* Restore default behavior. */
nobr { white-space: nowrap; }
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="/assets/styles/reset.css" rel="stylesheet">
		<link href="setup.css" rel="stylesheet">
		<link href="style.css" rel="stylesheet">
	</head>
	<body>
		<section>
			<h2>Default</h2>
			<p>This is a paragraph, so we have some text to overflow our container. Another sentence, another line. It’s probably nearly long enough now, but I’m just getting in the groove of typing it out here so let’s keep going longer. Let’s have a little bit more here, for good measure. Just for one more line!</p>
		</section>
		<section>
			<h2>“Ragged”</h2>
			<p>This is a paragraph, <nobr>so we</nobr> have some text to overflow <nobr>our container.</nobr> Another sentence, another line. <nobr>It’s probably</nobr> nearly long enough now, <nobr>but I’m</nobr> just getting in the&nbsp;groove of&nbsp;typing it&nbsp;out here so&nbsp;let’s keep going longer. Let’s have a&nbsp;little bit more here, for good measure. Just for one more&nbsp;line!</p>
		</section>
	</body>
</html>
body {
	--base: 20px;

	display: grid;
	font-family: 'Helvetica', sans-serif;
	gap: var(--base);
	padding: var(--base);
}

section {
	background-color: gold;
	padding: calc(var(--base) / 2);
}

h2 { font-size: calc(var(--base) * 3); }