JSFiddle - React, Tailwind, and code Playground

HTML

I want to do get this effect:
<div class="wrap">
    <div class="foo foocenter"></div>
    <div class="bar barcenter"></div>
</div>
<br>
However, one of the elements will be text of unknown height, so I need to vertically-center with translateY, like so:
<div class="wrap">
    <div class="foo vcenter hcenter"></div>
</div>
<br>Works great!  For one child.  Unfortunately, with two child elements, the 2nd one is offset bu the height of the first: 
<div class="wrap">
    <div class="foo vcenter hcenter"></div>
    <div class="bar vcenter hcenter"></div>
</div>

CSS

.wrap {height: 100px; width: 200px; border: solid red 1px; position: relative; }
.foocenter {position: absolute; top: 20px; left: 30px; }
.barcenter {position: absolute; top: 10px; left: 40px; }

.foo {height: 60px; width: 140px; background: blue; z-index: -5; opacity: .5; }
.bar {height: 80px; width: 120px; background: yellow; z-index: -6; }

.vcenter {position: absolute; top: 50%; left: 50%; 
    transform: translate(-50%, -50%); }
.hcenter {margin: auto; }