JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
	<div class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi maiores error odio nisi ratione ipsa cupiditate minima quam esse, quas recusandae sapiente repellendus, nulla sunt aliquam perspiciatis harum iste iure!</div>
	<div class="main">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi maiores error odio nisi ratione ipsa cupiditate minima quam esse, quas recusandae sapiente repellendus, nulla sunt aliquam perspiciatis harum iste iure!
	</div>
	<div class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi maiores error odio nisi ratione ipsa cupiditate minima quam esse, quas recusandae sapiente repellendus, nulla sunt aliquam perspiciatis harum iste iure!</div>
</div>

CSS

* {
	box-sizing: border-box;
}

.container {
		height: 100vh;
	}

.main {
	background: #19B2FF;
	color: #fff;
  width:70%;
  float:left;
}

.left {
	background: #30BF30;
  float:left;
  width:15%;
}

.right {
	background: #FF6D24;
  width:15%;
  float:left;
}

@media (max-width: 700px) {
  .main {
   height: 100%;
  }
  
  .left, .right {
    float:right;
    width:30%;
  }
}