JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="box">
        <p>X</p>
        <p>Taller than the other two.</p>
    </div>
    <div class="box">
        <p>&nbsp;&nbsp;&nbsp;Y</p>
    </div>
    <div class="box">
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Z</p>
    </div>
</div>

CSS

#container {
    border: 2px solid #000;
    position: absolute;
    width: 20em;
    height: 10ex;
    overflow: hidden;
}

.box {
    background: transparent;
    position: absolute;
    border: 1px solid #0f0;
    width: 100%;
    height: 100%;
}