JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container">
<div id="main_content">
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
<p>long content</p>
</div>
<div id="side_content">
Finally I am fixed here!!
</div>
</div>
CSS
body { padding: 0; }
#container {
width: 500px;
margin: 0 auto;
position: relative;
overflow: hidden;
border: 1px solid yellow;
}
#main_content {
width: 250px;
border: 1px solid #F00;
}
#side_content {
position: fixed;
top: 0;
right: 0;
width: 200px;
left: 50%;
margin-left: 50px;
height: 100%;
border: 1px solid #0F0;
border-collapse: collapse;
}