JSFiddle - React, Tailwind, and code Playground

by Chris Ball

HTML

<main class="main"></main>
<aside class="aside">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati iste a, asperiores fugit quidem! Asperiores nostrum delectus quos, minus necessitatibus saepe nulla cum excepturi omnis reprehenderit. Repudiandae eos atque architecto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati iste a, asperiores fugit quidem! Asperiores nostrum delectus quos, minus necessitatibus saepe nulla cum excepturi omnis reprehenderit. Repudiandae eos atque architecto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati iste a, asperiores fugit quidem! Asperiores nostrum delectus quos, minus necessitatibus saepe nulla cum excepturi omnis reprehenderit. Repudiandae eos atque architecto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati iste a, asperiores fugit quidem! Asperiores nostrum delectus quos, minus necessitatibus saepe nulla cum excepturi omnis reprehenderit. Repudiandae eos atque architecto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati iste a, asperiores fugit quidem! Asperiores nostrum delectus quos, minus necessitatibus saepe nulla cum excepturi omnis reprehenderit. Repudiandae eos atque architecto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati iste a, asperiores fugit quidem! Asperiores nostrum delectus quos, minus necessitatibus saepe nulla cum excepturi omnis reprehenderit. Repudiandae eos atque architecto.</p>
</aside>

CSS

* {
	margin: 0;
}
body {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}
.main {
	background: #000;
	height: 300vh;
	flex: 0 0 70%;
}
.aside {
	background: yellow;
	flex: 0 0 30%;
	height: auto;
	position: sticky;
	top: 0;
}