JSFiddle - React, Tailwind, and code Playground

by Chris Ball

HTML

<div class="grid">
	<div class="hero"></div>
	<div class="main">i am the main</div>
	<div class="side">i am the side</div>
</div>

CSS

.grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.hero {
	background: red;
	grid-column: 1/-1;
	height: 50vh;
}

.main {
	background: yellow;
	height: 200vh;
}

.side {
	background: pink;
	align-self: start;
	position: sticky;
	top: 0;
}