JSFiddle - React, Tailwind, and code Playground

by Jonny

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
	<div class="row intro table-center">
		<div class="col-sm-6">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci magnam eligendi tempora repudiandae a, laboriosam quia, velit veniam dolores quas fugiat ad harum dicta odio! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus saepe similique, libero praesentium debitis placeat veritatis impedit commodi consequuntur odit! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae consequatur perferendis nemo accusantium, praesentium provident!</p>
		</div>
		<div class="col-sm-6 text-center">
			<a href="#" class="btn btn-primary">Buy</a>
		</div>
	</div>
</div>

SCSS

.table-center {
	display: table;
  @media (min-width: 768px) {
    display: block;
  }
	> [class*="col-"] {
		float: none;
		display: table-cell;
		vertical-align: middle;
	} 
}

.intro {
  background: #eee;
  padding: 20px;
  margin-top: 20px;
}