JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="info">INFO that should stay at the top left of .container</div>
    <div class="big"><img src="http://www.campshane.com/blog/wp-content/uploads/2011/01/fast-food-burger.jpg" /></div>
</div>
If you scroll down this page<br />
INFO<br />
scrolls down<br />
with it<br />
Keep scrolling<br />
Keep scrolling<br />
Keep scrolling<br />
Keep scrolling<br />
Keep scrolling<br />
Keep scrolling<br />
Keep scrolling<br />
Keep scrolling<br />
Keep scrolling<br />
Keep scrolling<br />
Keep scrolling<br />
Keep scrolling<br />
Keep scrolling<br />
Keep scrolling<br />
Keep scrolling<br />
Keep scrolling<br />
Keep scrolling<br />
Keep scrolling<br />
Keep scrolling<br />
Keep scrolling<br />
Keep scrolling<br />
Keep scrolling<br />
Keep scrolling<br />
Keep scrolling<br />
Keep scrolling<br />
Keep scrolling<br />
Keep scrolling<br />
Keep scrolling<br />
Keep scrolling<br />
Keep scrolling<br />
Keep scrolling<br />
Keep scrolling<br />
Keep scrolling<br />
Keep scrolling<br />
Keep scrolling<br />
Keep scrolling<br />
See what I mean?<br />

CSS

.container {
    /* What do I put here? */
}
.info {
     position: fixed;
     background-color: white;
     z-index: 2;   
}
.big {
     width: 600px;
     height: 400px; 
     overflow-x: scroll;
     overflow-y: scroll;  
     opacity: 0.2;
}