JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flex-container">
		<div class="flex-item">1</div>
		<div class="flex-item">2</div>
		<div class="flex-item">3</div>
	</div>

CSS

html, body {
		width:100%;
		height:100%;
		margin:0;
		padding:0;
		background-color:#ccc;
	}
	div {
		box-sizing: border-box;
	}
	
	.flex-container {
		background-color:#fff;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: stretch;
		flex-wrap: nowrap;
		align-content: stretch;
		
		max-width:1200px;
		height:100%;
		margin:0 auto;
    }

	.flex-item {
		outline:1px solid #ccc;
		flex-grow: 0;
		align-self: stretch;
	}
	
	.flex-item:nth-child(1) {
		flex-basis:200px;
	}

	.flex-item:nth-child(2) {
		flex-grow: 1;
		
	}

	.flex-item:nth-child(3) {
		flex-basis:200px;
	}