JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap">
    <div id="sidebar">
        <ul>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
        </ul>
    </div>
    
    <div id="content">
        <div id="head">Hello</div>
        <div id="body">World</div>
    </div>
</div>

CSS

#wrap {
    margin: auto;
    width: 400px;
    overflow: hidden;
    position: relative;

}

#sidebar {
    float: right;
    width: 100px;
    background: red;
    height: 100%;
    position: absolute;
    right: 0;
}

#content {
    float: left;
    width: 300px;
}

#head {
    background: green;
    color: #000;
}

#body {
    background: #000;
    color: #FFF;
    min-height: 300px
}