JSFiddle - React, Tailwind, and code Playground

by Joe Mottershaw

HTML

<div class="parent parent--translate">
    <div class="children">
        <p>translateY
            <br />height: 100px</p>
    </div>
</div>
<div class="parent  parent--translate">
    <div class="children children--odd">
        <p>translateY
            <br />height: 101px</p>
    </div>
</div>

CSS

* {
    box-sizing: border-box;
}
.parent {
    display: block;
    float: left;
    text-align: center;
    background: #CCC;
    width: 200px;
    height: 200px;
    margin-right: 10px;
}
.parent--translate .children {
    -webkit-transform: translateY(50%);
    -moz-transform: translateY(50%);
    -ms-transform: translateY(50%);
    -o-transform: translateY(50%);
    transform: translateY(50%);
}
.children {
    display: inline-block;
    width: 120px;
    height: 100px;
    background: #999;
    border: 1px solid #333;
}
.children--odd {
    height: 101px;
}
p {
    margin-top: 10px;
    padding: 5px 0;
    border-top: 1px solid #222;
}