JSFiddle - React, Tailwind, and code Playground

by bstst

HTML

<div>
    <ul>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>

    </ul>
    <span>hau</span>
</div>
        
<div>
    <ul>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
    </ul>
    <span>hau</span>
</div>

CSS

html, body { margin: 0; padding: 0; }
div {
    position: fixed;
    top: 50%; left: 5%; right: 60%; bottom: auto;
    overflow-y: auto;
    background: #fef;
    max-height: 80%;
    transform: translateY(-50%);
}
div + div {
    left: 45%;
    right: 5%;
    background: #efe;
}

ul {
    background: yellow;
}

span {
    position: fixed;
    background: red;
    top: 0;
    right: 0;
}