JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
	  <div class="column one">
	   <h2> column #1 </h2>
	   <p>menu items</p>
	  </div>
	  <div class="column two">
	   <h2>column #2</h2>
	   <p> Some contents in column 2 </p>
	  </div>
	</div>

CSS

.row {
	  display: flex;
	}
	.column {
	  flex: 50%;
	  padding: 16px;
	}
.one{
  background-color:tomato;
	  min-height: 100%;
}
.two{
  background-color:#33a8ff;
	  height: 5000px;
}

html,body{
  height:100%;
  margin:0;
}