JSFiddle - React, Tailwind, and code Playground

HTML

<div class="recipe_rows">
			<div class="recipe_first_col">
				<div class="recipe_row recipe_header">
					<!-- row for buttons -->
					<p>C1R1</p>
				</div>
				<div class="recipe_row">
					<!-- row for segment selection -->
					<p>C1R2</p>
				</div>
				<div class="recipe_row">
					<!-- row for setpoints -->
					<p>C1R3</p>
				</div>
				<div class="recipe_row">
					<!-- row for events -->
					<p>C1R4</p>
				</div>
				<div class="recipe_row">
					<!-- row for events -->
					<p>C1R5</p>
				</div>
				<div class="recipe_row">
					<!-- row for events -->
					<p>C1R6</p>
				</div>
				<div class="recipe_row">
					<!-- row for events -->
					<p>C1R7</p>
				</div>
				<div class="recipe_row">
					<!-- row for events -->
					<p>C1R8</p>
				</div>
				<div class="recipe_row">
					<!-- row for events -->
					<p>C1R9</p>
				</div>
				<div class="recipe_row">
					<!-- row for events -->
					<p>C1R10</p>
				</div>
				<div class="recipe_row">
					<!-- row for events -->
					<p>C1R11</p>
				</div>
				<div class="recipe_row">
					<!-- row for events -->
					<p>C1R12</p>
				</div>
				<div class="recipe_row">
					<!-- row for events -->
					<p>C1R13</p>
				</div>
				<div class="recipe_row">
					<!-- row for events -->
					<p>C1R14</p>
				</div>
				<div class="recipe_row">
					<!-- row for events -->
					<p>C1R15</p>
				</div>
				<div class="recipe_row">
					<!-- row for events -->
					<p>C1R16</p>
				</div>
				<div class="recipe_row">
					<!-- row for events -->
					<p>C1R17</p>
				</div>
				<div class="recipe_row">
					<!-- row for events -->
					<p>C1R18</p>
				</div>
				<div class="recipe_row">
					<!-- row for events -->
					<p>C1R19</p>
				</div>
				<div class="recipe_row">
					<!-- row for events -->
					<p>C1R20</p>
				</div>
				<div class="recipe_row">
					<!-- row for events -->
					<p>C1R21</p>
				</div>
				<div class="recipe_row">
					<!-- row for events...

CSS

.recipe_rows {
	width: 99%;
	height: 99%;
	overflow: auto;
	line-height: 52px;
	}

.recipe_rows p {
	float: left;
	width: 165px;
	height: 40px;
	line-height: 40px;
	padding: 5px;
	margin: 0px;
}

.recipe_first_col {
	min-height: 500px;
	float: left;
	width: 175px;
	background: #eee;
	overflow-y: hidden;
}

.recipe_cols {
	min-height: 500px;
	margin-left: 175px;
	overflow-y: hidden;
}

.recipe_header {
	font-weight: bold;
	border-bottom: 1px solid #333;
	border-top: 1px solid #aaa;
	color: #fff;
	background: #006 url('../media/menu_blu.png');
}

.recipe_row {
	float: left;
	white-space: nowrap;
	width: inherit;
	clear: both;
}