JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
	<div class="first"></div>
	<div class="second"></div>
	<div class="third"></div>
</div>

SCSS

.container {
	width: 100%;
	max-width: 800px;
	height: auto;
	margin: 0 auto;
	background: pink;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	
	.first 	{ 
		background: green; 
		height: 50px;
		align-self: stretch;
	}
	
	.second { 
		background: blue; 
		height: 100px;
	}
	
	.third 	{ 
		background: crimson; 
		height: 100px;
	}
}