JSFiddle - React, Tailwind, and code Playground

by Martin Sjåstad

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>The Holy Grail of Layouts: Example #2: A List Apart</title>
</head>

<body>
	<div id="container">
		<div id="left" class="column">
         <img src="http://placehold.it/100x100"/>
		</div>
    
    <div id="center" class="column">
			<h1>This is the main content.</h1>
		</div>

		<div id="right" class="column">
			<h2>This is the right sidebar.</h2>
	</div>
    
  </div>

</body>

</html>

CSS

#container {
  display: table;
  
}

.column {
  display: table-cell;
  vertical-align: middle;
}