JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div>1 (on top)</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>

<p>to look like:</p>

<span style="display:block; overflow:hidden">
    <span style="background:green; display:block; width:100px">1 (on top)</span>
    <span style="background:green; display:block; width:100px; float:left">2</span>
    <span style="background:green; display:block; width:100px; float:left">3</span>
    <span style="background:green; display:block; width:100px; float:left">4</span>
</span>

CSS

body > div {
    display: -webkit-flex;
    display: flex;
    position: relative;
    margin-top: 20px;
}

body > div > div {
    background: green;
    width: 100px;
}

body > div > div:first-child {
    position: absolute;
    top: -18px;
    left: 0;
}