JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test">
<a></a>
<div></div>
</div>

<div class="test">
<a></a>
<div id="relative"></div>
</div>

CSS

div.test
{
    padding: 1em;
    margin: 0em;
}

div.test > a
{
    border: 1px solid red;
    display: block;
    float: left;
    padding: 1em;
    margin: 2em;
    z-order: 2;
}

div.test > div
{
    border: 1px solid blue;
    padding: 1em;
    margin: 1em;
    z-order: 1;
}

#relative
{
    position: relative;
}

JavaScript

[].forEach.call(document.querySelectorAll('div.test > a'), function (link, count)
{
	link.innerText = 'Link ' + (count + 1);
    link.href = 'javascript:void(alert("You have clicked link ' + (count + 1) + '."))';
});
[].forEach.call(document.querySelectorAll('div.test > div'), function (div, count)
{
	div.innerHTML = [1, 2, 3, 4, 5, 6, 7, 8, 9].map(function (x) { return 'Div ' + (count + 1) + ' line ' + x + '<br>'; }).join('');
});