JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div class="container">
  <div id="border">
    <div style="float:left;">
example    
    </div>
    
    <div style="float: right;">
      vasea
    </div>
  </div>
</div>

CSS

html,
body {
    height: 100%;
}

    .container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#border{
  border: 2px solid black;
  display: box;
  padding-top: 10px;
  margin-bottom: 10px;
  }