JSFiddle - React, Tailwind, and code Playground

HTML

<div>
	<div style="border: 1px solid; padding: 8px 16px;">
		<table border="1" cellpadding="1" cellspacing="1" style="border-collapse: collapse; layout:">
			<tbody>
				<tr>
					<td style="width: 189px; ">
						<strong>dsafsdfsfsa</strong></td>
					<td style="width: 191px; ">
						<strong>sdafasdfasdf</strong></td>
					<td style="width: 109px; ">
						<strong>dsafsdf</strong></td>
					<td style="width: 272px; ">
						<strong>asdfdfsdfdf</strong></td>
				</tr>
				<tr>
					<td style="width: 189px; ">
						4234234</td>
					<td style="width: 191px; ">
						234234234vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv</td>
					<td style="width: 109px; ">
						234234</td>
					<td style="width: 272px; ">
						2342342</td>
				</tr>
				<tr>
					<td style="width: 189px; ">
						234324234</td>
					<td style="width: 191px; ">
						234324324</td>
					<td style="width: 109px; ">
						42342342</td>
					<td style="width: 272px; ">
						342342343</td>
				</tr>
				<tr>
					<td style="width: 189px; ">
						3423423</td>
					<td style="width: 191px; ">
						2342344</td>
					<td style="width: 109px; ">
						34234</td>
					<td style="width: 272px; ">
						4234234</td>
				</tr>
				<tr>
					<td style="width: 189px; ">
						42343244</td>
					<td style="width: 191px; ">
						234234234</td>
					<td style="width: 109px; ">
						4234234234</td>
					<td style="width: 272px; ">
						324234234</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

CSS

/*table { float: none; }*/
table { text-align: left; }