JSFiddle - React, Tailwind, and code Playground

HTML

<div class="multiColumn" id="divMultiColumn">
<ul class="noBullets" id="ulMultiColumn">

<li>
<h3>Scrolling List 1</h3>
<div class="scrollingTableDiv">
<table class="fullWidthTable scrollingTable" id="list1">
<tr><th>Col0</th><th>Col1</th><th>Col2</th><th>Col3</th><th>Col4</th><th>Col5</th><th>Col6</th><th>Col7</th></tr>
<tr><th>17nov</th><td>00xxx</td><td>XXXX XXXXX XXXX xxxxx</td><td>XXXXXXX</td><td>XXXXXX</td><td>1234561</td><td class="wordbreak">Descriptive text here</td><td>2</td></tr>
<tr><th>17nov</th><td>00xxx</td><td>XXXX XXXXX XXXX xxxxx</td><td>XXXXXXX</td><td>XXXXXX</td><td>1234561</td><td class="wordbreak">Descriptive text here</td><td>2</td></tr>
<tr><th>17nov</th><td>00xxx</td><td>XXXX XXXXX XXXX xxxxx</td><td>XXXXXXX</td><td>XXXXXX</td><td>1234561</td><td class="wordbreak">Descriptive text here</td><td>2</td></tr>
<tr><th>17nov</th><td>00xxx</td><td>XXXX XXXXX XXXX xxxxx</td><td>XXXXXXX</td><td>XXXXXX</td><td>1234561</td><td class="wordbreak">Descriptive text here</td><td>2</td></tr>
<tr><th>17nov</th><td>00xxx</td><td>XXXX XXXXX XXXX xxxxx</td><td>XXXXXXX</td><td>XXXXXX</td><td>1234561</td><td class="wordbreak">Descriptive text here</td><td>2</td></tr>
<tr><th>17nov</th><td>00xxx</td><td>XXXX XXXXX XXXX xxxxx</td><td>XXXXXXX</td><td>XXXXXX</td><td>1234561</td><td class="wordbreak">Descriptive text here</td><td>2</td></tr>
<tr><th>17nov</th><td>00xxx</td><td>XXXX XXXXX XXXX xxxxx</td><td>XXXXXXX</td><td>XXXXXX</td><td>1234561</td><td class="wordbreak">Descriptive text here</td><td>2</td></tr>
<tr><th>17nov</th><td>00xxx</td><td>XXXX XXXXX XXXX xxxxx</td><td>XXXXXXX</td><td>XXXXXX</td><td>1234561</td><td class="wordbreak">Descriptive text here</td><td>2</td></tr>
<tr><th>17nov</th><td>00xxx</td><td>XXXX XXXXX XXXX xxxxx</td><td>XXXXXXX</td><td>XXXXXX</td><td>1234561</td><td class="wordbreak">Descriptive text here</td><td>2</td></tr>
<tr><th>17nov</th><td>00xxx</td><td>XXXX XXXXX XXXX xxxxx</td><td>XXXXXXX</td><td>XXXXXX</td><td>1234561</td><td...

CSS

html,
body {
  font-size: 100%; }

/* Some foundation css styles */
body {
  padding: 0;
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  line-height: 1.5;
  position: relative;
  cursor: auto; }	

table {
  border: solid 1px #dddddd;
  table-layout: auto; }
  table tr th,
  table tr td {
	font-size: 0.875rem;
	color: #222222;
	text-align: left; }
  table tr.even, table tr.alt, table tr:nth-of-type(even) {
	background: #f9f9f9; }
  table thead tr th,
  table tfoot tr th,
  table tfoot tr td,
  table tbody tr th,
  table tbody tr td,
  table tr td {
	display: table-cell;
	line-height: 1.125rem; }
	

/* Set multicolumn div on large screens */
@media only screen and (min-width: 100px) {
	div.multiColumn {
		-moz-column-count: 2;
		-moz-column-gap: 1rem;
		-webkit-column-count: 2;
		-webkit-column-gap: 1rem;
		column-count: 2;
		column-gap: 1rem;
		padding: 0em;
	}
}

/* Hide bullets from list items in multicolumn div */
ul.noBullets {
	list-style: none; 
	padding: 0;
	margin: 0 0.5rem 0 0.5rem;
	display: -webkit-box;
	display: box;
	
}
ul.noBullets > li {
	display: inline-block;
	width: 100%;
}


table {
 -webkit-border-radius: 6px;
 -moz-border-radius: 6x;
 border-radius: 6px;
 border-collapse: initial;
}

.fullWidthTable {
	width: 100%;
}
.scrollingTableDiv {
	overflow-y: auto;
}

table tr td.wordbreak {
	word-break: break-all;
}

JavaScript

function makeTablesScroll() {
	$(".scrollingTable").each(function() {
		var table = this;
		maxRows = parseInt(this.dataset.scrollBeyond) + 1;
		var wrapper = table.parentNode;
		var rowsInTable = table.rows.length;
		var height = 0;
		if (rowsInTable > maxRows) {
			for (var i = 0; i < maxRows; i++) {
				height += table.rows[i].clientHeight;
			}
			wrapper.style.height = height + "px";
		}
	});
			

	/*
	$("#divMultiColumn").removeClass("multiColumn");
	$("#divMultiColumn").addClass("multiColumn");
	*/
			
	/*
	$("#divMultiColumn").each(function() {
		this.removeAttribute("class");
		this.setAttribute("class","multiColumn")
		
	});
	*/
}

/* Make tables scrollable */
makeTablesScroll();