JSFiddle - React, Tailwind, and code Playground

by fersterin

HTML

<table class="layout" cellspacing="0">
	<tr>
		<td class="col1"><img src="http://htmlbook.ru/example/images/tenniel1.png" alt=""></td>
		<td class="col2">
			<img src="http://htmlbook.ru/example/images/jabberwock.jpg" alt="">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum ipsum veniam similique voluptatibus perferendis impedit nostrum accusamus quasi itaque, ipsam earum illo quisquam asperiores eaque laudantium numquam. Accusamus repellat rerum, tempore quia!</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, sint?</p>
		</td>
		<td class="col3"><img src="http://htmlbook.ru/example/images/tenniel2.png" alt=""></td>
	</tr>
</table>

CSS

.layout {
	width: 100%;
	table-layout: fixed; /* Таблица делится на колонки равной ширины. При использовании этого значения, содержимое, которое не помещается в ячейку указанной ширины, будет «обрезано» либо наложено поверх ячейки. 
	В даннос случае используется чтобы средний блок не сжимался.*/
}
.layout td {
	vertical-align: top;
}
.col1 {
	width: 50%;
	background-color: #6D775B;
}
.col2 {
	width: 300px;
	background-color: #F5E8D0;
}
.col3 {
	width: 50%;
	text-align: right;
	background-color: #6D775B;
}
body {
	margin: 0;
	background-color: #6D775B;
}