JSFiddle - React, Tailwind, and code Playground

HTML

<div id="DIV-1">Header </div>

	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent cursus eu sapien et maximus. Donec pulvinar faucibus velit, vitae cursus metus finibus at. Pellentesque eget purus condimentum, dapibus mauris vitae, suscipit felis. Nunc eget enim vel diam laoreet malesuada nec eget ligula. Fusce nunc nibh, vestibulum eget aliquet nec, vulputate sit amet velit. Nulla quis quam sit amet leo pellentesque auctor. Nam elementum purus id accumsan aliquet. Nulla velit enim, faucibus et lectus nec, egestas viverra arcu. Morbi in enim ac sapien pulvinar iaculis. Mauris purus ex, elementum eu tincidunt in, convallis id velit. Vestibulum sed efficitur erat, at egestas turpis. Duis egestas volutpat diam, ac aliquet diam ultricies in. Vestibulum volutpat nec purus sit amet volutpat. Sed convallis lectus et magna placerat, sit amet sollicitudin ex volutpat. 

	Mauris nunc magna, pretium quis cursus vitae, lacinia id elit. Etiam lacinia risus non nunc eleifend, vel viverra lectus commodo. Sed ut justo ac eros ullamcorper dictum. Donec finibus, arcu ut viverra sodales, risus justo volutpat turpis, sit amet dignissim orci tellus ac ipsum. Proin quis velit nec nisl tempus auctor. Nulla sagittis neque id velit efficitur sodales. Pellentesque viverra tellus ut placerat sagittis. Phasellus viverra dolor id sem sagittis imperdiet. 

	Nunc vel ipsum sit amet nibh fermentum dictum. Maecenas ac nisl vitae ex molestie ultrices vel et enim. Donec eu arcu nunc. Donec eu mollis nibh. Suspendisse euismod sit amet purus at tincidunt. Fusce consequat, elit et sodales tincidunt, elit quam commodo sem, at faucibus justo neque a tellus. Vestibulum neque mi, condimentum eget est nec, condimentum scelerisque nisl. Fusce mattis, mauris ut egestas condimentum, sapien justo fringilla lorem, eget ultrices orci elit in erat. Ut feugiat lacus vitae ex molestie, eget luctus tellus accumsan. Cras quam urna, suscipit sed aliquam vitae, rutrum id ligula. Nunc nisi sem, tempus...

CSS

@media only screen 
and (orientation : landscape) {

		
	#DIV-1{
		position: absolute;
		left: 0px;
		box-sizing: border-box;
		background-color: #2693FF;
		height: 100%;
		width: 400px;
		float: left;
	}

	body {
		position: absolute;
		display: block;
		box-sizing: border-box;
		white-space: normal;
		-webkit-columns: 235px auto;
		-moz-columns: 235px auto;
		columns: 235px auto;
		-webkit-column-gap: 0;
		-moz-column-gap: 0;
		column-gap: 0;
		height: 100%;
		float: left;
		width: calc(100% + 450px) !important;
		min-width: -webkit-min-content !important;	
		padding-left: 400px;
	}
	
	#DIV-3 {
		box-sizing: border-box;
		background-color: #FF7373;
		height: 100%;
		width: 450px;
		-webkit-column-span: all;
		-moz-column-span: all;
		column-span: all;
		
		-webkit-column-break-inside: avoid;
		page-break-inside: avoid;
		break-inside: avoid;
		
	}	
	
	#DIV-3 {
		position: relative;
		float: right;
		left: 205px;
		box-sizing: border-box;
		background-color: #FF7373;
		height: 100%;
		width: 450px;
		-webkit-column-span: all;
		-moz-column-span: all;
		column-span: all;
		
		-webkit-column-break-inside: avoid;
		page-break-inside: avoid;
		break-inside: avoid;
		
	}		

}