JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div style='height: 100vh'></div>
<div id="div-1">
  <div class="test"></div>
  <div class="test"></div>
  <div class="test"></div>
  <div class="test"></div>
</div>
<div style='height: 100vh'></div>

CSS

body {
  margin: 0;
}
#div-1 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid grey;
  height: 100vh;
}
.test {
  width: 100px;
  height: 50px;
  background: #eee;
}

JavaScript

const el1 = document.querySelector('#div-1')
const test = document.querySelectorAll('.test')

let i = 0;

for(; i < test.length; i++) {
	console.log(test[i].offsetTop - el1.offsetTop)
}