JSFiddle - React, Tailwind, and code Playground

HTML

<header>OBEN</header>
<div id="timer">
	<output>65:43:21</output>
</div>
<aside>
	Timer klein,
	ging allein,
	in die tiefe Zeit hinein....
</aside>
<footer>UNTEN</footer>

CSS

* { box-sizing: border-box }

body {
	margin: 0 auto;
	max-width: 50em;
	height: 100vh;
	display:grid;
	grid: "oben oben" auto
		    "timer dings" 1fr
		    "unten unten" auto / 1fr 10em;
}
header, footer {
	font-size: 4rem;
	text-align:center;
	background-color: orange;
}
header { grid-area: oben; }
footer { grid-area: unten; }
aside { grid-area: dings; align-self:center; }
#timer {
	grid-area: timer;
	container-type: size;
	background: crimson;
	color: white;
	text-align: center;
	overflow-wrap: anywhere;
	border: 2em solid red;   /* visualisiertes padding ;-) */
	display: flex; flex-flow: column; justify-content: center;
	output {
		font: max(min(27cqi, 100cqb), 1rem) 'Fira Sans', 'Corbel', sans-serif;
		font-variant-numeric: lining-nums tabular-nums;
	}
}