JSFiddle - React, Tailwind, and code Playground

by joche

HTML

<div class="DivParent">
  <div class="DivWhichNeedToBeVerticallyAligned bg1">
    one line
 </div>
  <div class="DivWhichNeedToBeVerticallyAligned bg2">
    <p>one line</p>
 </div>
  <div class="DivWhichNeedToBeVerticallyAligned bg3">
    <p>one line</p>
     <p>two line</p>
  </div>    
  <div class="DivHelper"></div>
</div>

CSS

.DivParent {
 height: 100px;
 border: 1px solid lime;
 white-space: nowrap;
 background-color:#deadad;
}

.DivWhichNeedToBeVerticallyAligned {
display: inline-block;
vertical-align: middle;
white-space: normal;
}
.bg1 {
background-color:#ffaaff;
}
.bg2 {
background-color:#ffffff;
}
.bg3 {
background-color:#ffffa9;
height:100%
}

.DivHelper {
display: inline-block;
vertical-align: middle;
height:100%;
}