JSFiddle - React, Tailwind, and code Playground

HTML

<table>
	<thead>
		<tr>
			<th class="first">
				First
			</th>
			<th class="last">
				Last
			</th class="info">
			<th>
				Info
			</th class="join-date">
			<th>
				Join Date
			</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="first">
				<span>Don ovonMrLongNameIsMe!!!</span>
			</td>
			<td class="last">
				P
			</td>
			<td class="info">
                <pre>Here is some rando info that can vary in length. 
                     I talk a lot.</pre>
			</td>
			<td class="join-date">
				2013-03-01
			</td>
		</tr>
		<tr>
			<td class="first">
				Tom
			</td>
			<td class="last">
				Smith
			</td>
			<td class="info">
				I'm a quiet person.
			</td>
			<td class="join-date">
				<div>2013-04-222013-04-222013-04-222013-04-222013-04-222013-04-222013-04-222013-04-222013-04-22END!</div>
			</td>
		</tr>
	</tbody>
</table>

CSS

table {
    table-layout: fixed;
}

td {
    border: 1px solid rgb(0,0,0);
    min-width: 100px;
    max-width: 100px;
    overflow: auto; /* why isn't this a scrollbar? The text just overflows*/
}

.info {
    min-width: 200px;
    width: 100%;
}