JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">

		<p class="flex-item">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non consequat lorem. In dignissim mauris eu est commodo, ac ullamcorper dui facilisis. Sed feugiat eros quis facilisis feugiat. Pellentesque eu quam egestas, facilisis augue eu, aliquam mi. Nunc nunc metus, eleifend id finibus sit amet, imperdiet eget mi.
		</p>

		<p class="flex-item">
			In dignissim mauris eu est commodo, ac ullamcorper dui facilisis. Sed feugiat eros quis facilisis feugiat. Pellentesque eu quam egestas, facilisis augue eu, aliquam mi. Nunc nunc metus, eleifend id finibus sit amet, imperdiet eget mi.
		</p>

		<p class="flex-item">
			In dignissim mauris eu est commodo, ac ullamcorper dui facilisis. Sed feugiat eros quis facilisis feugiat. Pellentesque eu quam egestas, facilisis augue eu, aliquam mi. Nunc nunc metus, eleifend id finibus sit amet, imperdiet eget mi.
		</p>
			
	</div>

CSS

*{
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

body{
	font-family: 'Raleway', Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 300;
	color: #555;
}

.main{
	max-width: 1000px;
	margin: 20px auto;
	border: 1px dotted #999;
	padding: 20px;

	display: flex;
	flex-flow: row wrap;
}
/* adding any border, margin, padding rules here fixes it */
.flex-item{
  background: grey;
}

.flex-item:nth-child(1) {
	flex:1 100%;
}

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

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