JSFiddle - React, Tailwind, and code Playground

by Eric Howe

HTML

<div class="container_row">
    <div class="layer1">
        Lorem ipsum...
    </div>
    <div class="layer2">
        More lorem ipsum...
    </div>
</div>
<div class="container_row">
    ...same HTML as above. This one should never overlap the .container_row above.
</div>

CSS

.container_row {
    border: 1px solid red;
    height: 50px;
    margin: 0;
    position: relative;
}

.layer1 {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    height: 50px;
}

.layer2 {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    height: 50px;
    border: 1px solid green;
}