<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.items {
display: grid;
grid-template-columns: 1fr 1fr;
}
.right-item,
.left-item {
position: sticky;
top: 0px;
display: grid;
height: 500px;
align-items: center;
justify-items: center;
margin: 1em;
font-size: 4em;
border: 1em solid lightcoral;
}
.left-item {
background-color: lightgray;
}
.right-item {
background-color: darkgray;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
<script>
const text = [['Super', 'Zen'], ['Zen', 'Super']]
const containerEl = document.querySelector('.container')
containerEl.innerHTML = text.map(([item1, item2]) => {
return `<div class="items">
<div class="left-items">
${[...item1].map(i => `<div class="left-item">${i}</div>`).join('')}
</div>
<div class="right-items">
${[...item2].map(i => `<div class="right-item">${i}</div>`).join('')}
</div>
</div>`
}).join('')
</script>
</html>