JSFiddle - React, Tailwind, and code Playground

HTML

<div class="reference"><div class="fixed">Test 1</div>Some other content in 1.</div>
<div class="reference"><div class="fixed">Test 2</div>Some other content in 2.</div>
<div class="reference"><div class="fixed">Test 3</div>Some other content in 3.</div>
<div class="reference"><div class="fixed">Test 4</div>Some other content in 4.</div>
<div class="reference"><div class="fixed">T 5.1</div><div class="fixed">T  5.2</div><div class="fixed">T 5.3</div><div class="fixed">T 5.4</div>Some other content in 5 (which has four fixes in it!).</div>

CSS

body {
    height: 1500px; /* get scroll for demo */
}
.reference {
    width: 200px;
    height:200px;
    border: 1px solid black;
    float: left;
    margin: 50px;
}

.fixed {
    position: fixed;
    width: 40px;
    height: 25px;
    border: 1px solid red; /* to see it */
}
.reference:nth-child(1) .fixed,
.reference:nth-child(5) .fixed:nth-of-type(1) {
    margin-top: 200px; /*push/pull it up/down */
    margin-left: 200px; /* push/pull it right/left */
}
.reference:nth-child(2) .fixed,
.reference:nth-child(5) .fixed:nth-of-type(2){
    margin-top: -27px; 
    margin-left: 200px; 
}
.reference:nth-child(3) .fixed,
.reference:nth-child(5) .fixed:nth-of-type(3) {
    margin-top: -27px; 
    margin-left: -42px; 
}
.reference:nth-child(4) .fixed,
.reference:nth-child(5) .fixed:nth-of-type(4){
    margin-top: 200px; 
    margin-left: -42px; 
}