JSFiddle - React, Tailwind, and code Playground

by Osama Qassar

HTML

<div class="vertical-align-content">
  Hodor! sfdg sfdg dsfg dfs gdf gdf godor! sfdg sfdg dsfg dfs gdf gdf godor! sfdg sfdg dsfg dfs gdf gdf godor! sfdg sfdg dsfg dfs gdf gdf godor! sfdg sfdg dsfg dfs gdf gdf godor! sfdg sfdg dsfg dfs gdf gdf godor! sfdg sfdg dsfg dfs gdf gdf godor! sfdg sfdg dsfg dfs gdf gdf g
</div>
<div class="vertical-align-content">
  Hodor! sfdg sfdg dsfg dfs gdf gdf godor! sfdg sfdg dsfg dfs gdf gdf godor! sfdg sfdg dsfg dfs gdf gdf godor! sfdg sfdg dsfg dfs gdf gdf godor! sfdg sfdg dsfg dfs gdf gdf godor! sfdg sfdg dsfg dfs gdf gdf godor! sfdg sfdg dsfg dfs gdf gdf godor! sfdg sfdg dsfg dfs gdf gdf g
</div>

CSS

.vertical-align-content {
  background-color:#f18c16;
  min-height:200px;
  width:46%;
  float:left;
  display:flex;
  align-items:center;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
	display: flex;
	justify-content: center;
	flex-direction: column;
	text-align: center;
}