JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sidebar">
    <ul>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>
            <input type="text" placeholder="Blank"/>
            <div class="tooltip">
                <input type="text" placeholder="Blank"/>
            </div>
        </li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
    </ul>
</div>

CSS

*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
html, body{
    margin: 0;
    padding: 0;
    overflow: hidden;
}
ul, li{
    list-style:none;
}
.sidebar{
    position: fixed;
    left:0;
    top:0;
    bottom:0;
}
ul{
    border-right: 1px solid #ccc;
    margin: 0;
    padding: 0;
    width:300px;
    height:100%;
    overflow-y:auto;
    overflow-x:hidden;
}
li{
    padding:10px;
    width: 100%;
    border-bottom: 1px solid #ccc;
    float: left;
}
.tooltip {
    position: absolute;
    background: #fff;
    border: 1px solid #ccc;
    top: 0;
    right:-40px;
}