JSFiddle - React, Tailwind, and code Playground

HTML

<body>
		<div id="leftSide">
			<p>orange</p>
		</div>
		<div id="rightSide">
			<div id="distance">apple</div>
			<div id="googleMap"></div>
		</div>
</body>

CSS

html, body  {
	margin:0;
	padding:0;
	height:100%
}
body {
  width:100%;
  margin:0;
  display:table;
  border-collapse:collapse;
  table-layout:fixed;
}


#leftSide {
	display:table-cell;
	vertical-align:middle;
	width:2em;
	font-size:4em;
	padding:0;
	overflow:hidden;
	background-image: url('eiffeltower.jpg');
}
#leftSide p {
	display:table;
	text-indent:1.75em;
	white-space:nowrap;
	transform:rotate(-90deg) translate( -50%,0);
	transform-origin:1em center;
}

#rightSide
{
	height: 100%;
	margin:0;
	padding:0;
}

#distance
{
	height:20%; 
    text-align: center;
    vertical-align: middle;
	font-size: 2em;
}

#googleMap
{
	height:80%;
    background-color: yellow;
}