JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent-to-position-by">
<div class="fixed-elements">
    <div class="fixed">
        I am &quot;fixed positioned&quot;
    </div>
</div>
<div class="scrolling-contents">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus neque sit amet neque vestibulum vestibulum. In et venenatis lacus. Nullam sagittis erat orci, ac dignissim massa ultricies nec. Donec fringilla vel mauris et luctus. Donec auctor massa quis metus bibendum, et sodales eros ornare. Aliquam finibus sit amet nunc non aliquam. Phasellus suscipit dictum pharetra. Quisque purus turpis, scelerisque sit amet molestie non, pellentesque sed orci. Aliquam luctus tempor velit nec pulvinar. Aliquam eget sem id neque gravida efficitur.
</div>
</div>

CSS

.parent-to-position-by {
    position: relative;
    top: 40px; /* just to show it's relative positioned */
}

.scrolling-contents {
    display: inline-block;
    width: 100%;
    height: 200px;
    line-height: 20px;
    white-space: nowrap;
    background-color: #CCC;
    overflow: scroll;
}
.fixed-elements {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
}
.fixed {
    position: absolute; /* effectively fixed */
    top: 20px;
    left: 20px;
    background-color: #F00;
    width: 200px;
    height: 20px;
}