JSFiddle - React, Tailwind, and code Playground

by Igor Mello

HTML

<div class="um">

  <div class="dois">

    <p>teste 2!</p>

  </div>

  <div class="tres">

    <p>teste 3! teste 3! teste 3! teste 3! teste 3! teste 3! teste 3! teste 3! teste 3! teste 3! teste 3! teste 3! teste 3! teste 3!teste 3! teste 3! teste 3! teste 3! teste 3! teste 3! teste 3! teste 3! teste 3! teste 3! teste 3! teste 3! teste 3! teste 3! teste 3! teste 3! teste 3! teste 3! teste 3! teste 3! teste 3!</p>

  </div>

</div>

CSS

.um {
  background-color:#000;
  background-position:center center;
  position: absolute;
  padding: 10px 10px 10px 0;  
  /*top right bottom left*/   
}

.dois, .tres {
  float: right;
  margin-left: 10px; 
  background-color:#CCC;
  width:200px;
  height:200px;
  display: table;
}

.dois p, .tres p {
  top: 50%;
  display: table-cell;
  vertical-align: middle;
}