HTML

<div class="container"> <div class="layer"> <h2>Column 1</h2> </div> <div class="layer"> <h2>Column 2</h2> </div> </div>

CSS

.container { position: relative; width: 75%; margin: auto; } .layer { position: absolute; display: flex; flex-direction: column; top: 0; right: 0; bottom: 0; left: 0; width: 50%; } .layer:first-child { margin-right: auto; } .layer:last-child { margin-left: auto; background: #778899; color: #fff; } .layer:first-child > h2 { padding: 1em; background: #98FB98; } .layer:last-child > h2 { padding: 1em; background: #778899; color: #fff; }

JavaScript