JSFiddle - React, Tailwind, and code Playground

by tonyleeper

HTML

<div class="flyout">
    <div class="flyout-header">
        <h1>FILTER BY</h1>
        <button>Done</button>
    </div>
    <div class="flyout-content">
        <div class="menu">
            <ul>
                <li>Owner</li>
                <li>Status</li>
            </ul>
        </div>
        <div class="options">
            <div>All</div>
            <div class="options-scrollable">
                <div>
                    <ul>
                        <li>system</li>
                        <li>john</li>
                        <li>sys2</li>
                        <li>jaap2</li>
                        <li>kevin</li>
                        <li>system</li>
                        <li>john</li>
                        <li>sys2</li>
                        <li>jaap2</li>
                        <li>kevin</li>
                        <li>system</li>
                        <li>john</li>
                        <li>sys2</li>
                        <li>jaap2</li>
                        <li>kevin</li>
                        <li>system</li>
                        <li>john</li>
                        <li>sys2</li>
                        <li>jaap2</li>
                        <li>kevin</li>                    
                    </ul>
                </div> 
            </div> 
        </div>
    </div>
</div>

CSS

html, body {
    height: 100%;
}

* {
    margin: 0;
    padding: 0;
}

.flyout {
    width: 400px;
    position: relative;
    background-color: lightyellow;
}

.flyout-header button {
    position: absolute;
    right: 6px;
    top: 3px;
    padding: 5px;
}

.flyout-content {
    display: table;
    width: 100%;
}

.menu {
    display: table-cell;
    width: 100px;
    overflow: auto;
    background-color: lightblue;
}

.options {
    display: table-cell;
    background-color: lightgreen;

}

.options-scrollable {
    height: 370px;
    overflow: auto;
}

ul {
    list-style: none;
}

JavaScript

/**
    Flyout Layout
*/