css vertical align

by Alejandro M

HTML

<div class="h">
<div class="r">
  <div class="t">
    <p>rrrr</p>
    <span></span>
  </div>
  <div class="t">
    <p>rrr asaj shdahdha shd ashdasasadansd as dad sasdasdshdadr</p>
    <span></span>
  </div>
  </div>
</div>

CSS

.h {
  width: 100%;
  background: green;
  font-size: 0;
  height:200px;
  overflow:hidden;
}
.r{transform: translateY(-50%);
    margin-top: 100px;
}

.t {
  display: inline-block;
  vertical-align: middle;
  background: red;
  width: 50%;
  font-size: 0;
}

p,
span {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  padding: 0;
  margin: 0;
}

p {
  padding-right: 50px!important;
}

span {
  width: 50px;
  margin-left: -50px;

}
span:before{    content: "";
    background: yellow;
    width: 50px;
    height: 10px;
    position: relative;
    float: left;}