JSFiddle - React, Tailwind, and code Playground

by George Batt

HTML

<div id=a>
    <div id=b>
    </div>
  </div>

CSS

#a {
  position: fixed;
  left:10px; top:10px; bottom:10px; right:10px;
  background: yellow;
  overflow-y: scroll;
}
#b {
  
}
.t{
  display:table;
  width:100%;
  border-collapse: collapse;
    position:relative;
}
.m {
  display:table-row;
  position: relative;
  background: #789;
  border-top: thin solid #ccc;
}
.u, .c {
  display: table-cell;
}
.u {
  width: 100px;
}
.opener {
	height: 13px;
	text-align: center;
	cursor: pointer;
	color: red;
	width: 100%;
	bottom: 0;
	left:0;
	z-index: 2;
	position: absolute;
}
.opener::before {
	content: '▼';
}

JavaScript

for (var i=0; i<100;i++) {
  $('<div class=t><div class=m><div class=u>U'+i+'</div><div class=c>C'+i+'</div></div><div class=opener></div></div>').appendTo('#b');
}