JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">        
        
        <div class="main">    
        
            <div class="sidebar">
                <h1>Options</h1>
                <div class="sidebar-content">
                    <div class="sidebar-options">
                        <h1>Sort by</h1>
                        <ul>
                            <li><a href="#">Option 1</a></li>
                            <li><a href="#">Option 2</a></li>
                            <li><a href="#">Option 3</a></li>
                            <li><a href="#">Option 4</a></li>
                            <li><a href="#">Option 5</a></li>
                        </ul>
                    </div><!-- end .sidebar-options -->
                    <div class="sidebar-list">
                        Item <br />Item <br />Item <br />
                        Item <br />Item <br />Item <br />
                        Item <br />Item <br />Item <br />
                        Item <br />Item <br />Item <br />
                        Item <br />Item <br />Item <br />
                        Item <br />Item <br />Item <br />
                        Item <br />Item <br />Item <br />
                        Item <br />Item <br />Item <br />
                        Item <br />Item <br />Item <br />
                    </div><!-- end .sidebar-list -->
                </div><!-- end .sidebar-content -->
            </div><!-- end .sidebar -->

            <div class="content">                
                Lorem ipsum dolor sit amet.<br />
                Lorem ipsum dolor sit amet.<br />
                Lorem ipsum dolor sit amet.<br />
                Lorem ipsum dolor sit amet.<br />
                Lorem ipsum dolor sit amet.<br />
                Lorem ipsum dolor sit amet.<br />
                Lorem ipsum dolor sit amet.<br />
                Lorem ipsum dolor sit amet.<br />
                Lorem ipsum dolor sit amet.<br />
                Lorem ipsum dolor sit amet.<br />
                Lorem...

CSS

.wrapper {
    width : 500px;
    margin : 0 auto;
}        

.main {        
    position: relative;
}

.content {

}    

.sidebar {
    width: 150px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
}

.sidebar-options {
    position: relative;    
}

.sidebar-content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background : pink;
}

.sidebar-list {
    position: relative; 
    height: 200px;
    overflow-y: scroll;            
}

.sidebar + .content {
    width: 350px;
}