JSFiddle - React, Tailwind, and code Playground

by Calvin Scherle

HTML

<div class="DivParent bg1">
    <div class="DivWhichNeedToBeVerticallyAligned">
        one line
    </div><div class="DivHelper"></div>
</div>
<div class="DivParent bg2">
    <div class="DivWhichNeedToBeVerticallyAligned">
        <p>Two</p>
        <p>Lines</p>
    </div><div class="DivHelper"></div>
</div>
<div class="DivParent bg3">
    <div class="DivWhichNeedToBeVerticallyAligned">
        <img src="http://placekitten.com/50/50" style="display:block;" alt="some image" />
    </div><div class="DivHelper"></div>
</div>

<!--[if lte IE 7]>
    <style>
        .DivWhichNeedToBeVerticallyAligned,
        .DivHelper {
            display: inline;
            zoom: 1; 
        }
    </style>
<![endif]-->

CSS

.DivParent {
    height: 100px;
    border: 1px solid lime;
    white-space: nowrap;
}
.DivWhichNeedToBeVerticallyAligned {
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}
.DivHelper {
    display: inline-block;
    vertical-align: middle;
    height:100%;
}

.bg1 {
background-color:#ffaaff;
}
.bg2 {
background-color:#ffffff;
}
.bg3 {
background-color:#ffffa9;
height:100%
}

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