JSFiddle - React, Tailwind, and code Playground

by Chris Ball

HTML

<div class="parent">
	<div class="stick">
		<div class="stuck">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit deleniti a maiores eos blanditiis nam rerum dolor, ut vero harum cumque aliquid pariatur. Enim delectus minima nisi nulla cupiditate! Error?</div>
	</div>
	<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, doloremque, magnam! Unde, harum, repellendus sequi mollitia, possimus explicabo ipsam rerum amet maiores, nam deserunt odit dicta sint praesentium quam quos.</div>
	<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, doloremque, magnam! Unde, harum, repellendus sequi mollitia, possimus explicabo ipsam rerum amet maiores, nam deserunt odit dicta sint praesentium quam quos.</div>
	<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, doloremque, magnam! Unde, harum, repellendus sequi mollitia, possimus explicabo ipsam rerum amet maiores, nam deserunt odit dicta sint praesentium quam quos.</div>
	<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, doloremque, magnam! Unde, harum, repellendus sequi mollitia, possimus explicabo ipsam rerum amet maiores, nam deserunt odit dicta sint praesentium quam quos.</div>
	<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, doloremque, magnam! Unde, harum, repellendus sequi mollitia, possimus explicabo ipsam rerum amet maiores, nam deserunt odit dicta sint praesentium quam quos.</div>
	<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, doloremque, magnam! Unde, harum, repellendus sequi mollitia, possimus explicabo ipsam rerum amet maiores, nam deserunt odit dicta sint praesentium quam quos.</div>
	<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, doloremque, magnam! Unde, harum, repellendus sequi mollitia, possimus explicabo ipsam rerum amet maiores, nam deserunt...

CSS

.parent {
	background: #fff;
	display: -ms-grid;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr) ) ;
	width: 100%;
}

.stick {
	background: red;
	-ms-grid-row: 1;
	-ms-grid-row-span: 998;
	grid-row: 1 / 999;
}

.stuck {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
}

.item {
	border-top: 2px solid;
}