JSFiddle - React, Tailwind, and code Playground

by lasha

HTML

<div class="categoryTables">
	<div class="categoryTablesLeft">
        <h3>Policies</h3> <span>(<a href="#">17022</a>)</span>
		<div class="categoryTableInner">
			<table>
				<thead>
					<tr>
						<th class="colFirst">sourcetype</th>
						<th class="colSecond">Count</th>
						<th class="colThird">Last Update</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td><span><a href="#">eventNameHere</a></span></td>
						<td><span><a href="#">8,453</a></span></td>
						<td><span><a href="#">Fri Jan 10 00:09:19 2014</a></span></td>
					</tr>
					<tr>
						<td><span><a href="#">eventNameHere</a></span></td>
						<td><span><a href="#">8,453</a></span></td>
						<td><span><a href="#">Fri Jan 10 00:09:19 2014</a></span></td>
					</tr>
					<tr>
						<td><span><a href="#">eventNameHere</a></span></td>
						<td><span><a href="#">8,453</a></span></td>
						<td><span><a href="#">Fri Jan 10 00:09:19 2014</a></span></td>
					</tr>
					<tr>
						<td><span><a href="#">eventNameHere</a></span></td>
						<td><span><a href="#">8,453</a></span></td>
						<td><span><a href="#">Fri Jan 10 00:09:19 2014</a></span></td>
					</tr>
					<tr>
						<td><span><a href="#">eventNameHere</a></span></td>
						<td><span><a href="#">8,453</a></span></td>
						<td><span><a href="#">Fri Jan 10 00:09:19 2014</a></span></td>
					</tr>
				</tbody>
			</table>
		</div>
		
		<h3>Client Names</h3> <span>(<a href="#">17022</a>)</span>
        <div class="categoryTableInner">
			<table>
				<thead>
					<tr>
						<th class="colFirst">sourcetype</th>
						<th class="colSecond">Count</th>
						<th class="colThird">Last Update</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td><span><a href="#">eventNameHere</a></span></td>
						<td><span><a href="#">8,453</a></span></td>
						<td><span><a href="#">Fri Jan 10 00:09:19 2014</a></span></td>
					</tr>
					<tr>
						<td><span><a href="#">eventNameHere</a></span></td>
						<td><span><a...

CSS

.categoryTables {
    margin: 20px 27px 5px;
}

.categoryTablesLeft, .categoryTablesRight {
    width: 50%;
}

.categoryTablesLeft { float: left; }

.categoryTablesRight { float: right; }

.categoryTableInner {
}

.categoryTableInner table {
    width: 100%;
    padding: 12px 20px;
    border: 1px solid #e0e0e0;
    border-collapse: inherit;
}

.categoryTableInner td, .categoryTableInner tr {
    position: relative;
    height: 18px;
    border: 0;
    border-top: 1px solid #ccc;
}

.categoryTableInner th {
	padding-left: 0;
}

.categoryTableInner tr:first-child {
	border-top-color: #999;
}

.categoryTableInner span {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
    width: 100%;
    line-height: 29px;
}

.categoryTableInner .colFirst {
    width: 40%;
}

.categoryTableInner .colSecond {
    width: 10%;
}

.categoryTableInner .colThird {
    width: 50%;
}

.categoryTablesLeft .categoryTableInner {
    margin-right: 10px;
}

.categoryTablesRight .categoryTableInner {
    margin-left: 10px;
}