JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="content">
	<table cellpadding="7" cellspacing="1" class="border">
		<tr>
			<td>VeryLongBitOfTextVeryLongBitOfText</td>
			<td>VeryLongBitOfTextVeryLongBitOfText</td>
            <td><img src="dogs.jpg" width="400" height="100" alt="trev"/></td>
			<td>VeryLongBitOfTextVeryLongBitOfText</td>
		</tr>
	</table>
</div>
</body>

CSS

body, table, td {
	color      : #1D1F22;
}


#content {
	padding: 10px;
	overflow: scroll;  
	background-color:red;
  display: table-cell;    
	}

.border {
	background-color: #4385DB;
	color           : #4385DB;
}

table
{
    word-break: break-all
    width: 100%;
    height: 100%;
    overflow: hidden;  
    color: white;  
}

@media(min-width: 800px) {
	#content {
		width        : 98%;
	}
}