JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div id="container">

    <ul id="menu">
        <li>lorem</li>
        <li>ipsum</li>
    </ul>

    <div id="content">
        Eleifend option congue nihil imperdiet doming id quod mazim placerat facer. Demonstraverunt lectores legere, me lius quod ii legunt. Nam liber tempor cum soluta nobis possim assum typi non. Magna aliquam erat volutpat ut wisi enim ad minim veniam quis nostrud exerci. Et quinta decima, eodem modo typi qui nunc nobis videntur parum clari fiant sollemnes in? Legentis in iis qui facit eorum claritatem Investigationes.

Demonstraverunt lectores legere me lius quod ii legunt saepius claritas est etiam processus. Qui nunc nobis videntur parum clari fiant sollemnes in. Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat! Gothica quam nunc putamus parum claram anteposuerit litterarum formas humanitatis per seacula quarta decima. Mazim placerat facer possim assum typi non habent claritatem insitam? Volutpat ut wisi enim ad minim veniam quis nostrud exerci tation ullamcorper suscipit lobortis nisl. Accumsan et iusto odio dignissim qui blandit praesent luptatum zzril. Notare quam littera, et quinta decima eodem modo typi.

Decima eodem modo typi qui nunc nobis videntur! Dolore te feugait nulla facilisi nam liber tempor cum soluta. Littera gothica quam nunc putamus parum claram anteposuerit litterarum. Magna aliquam erat volutpat ut wisi enim ad minim veniam. Mutationem consuetudium lectorum mirum est notare quam formas humanitatis per seacula quarta.

    </div>

</div>

CSS

#container {
    margin: 60px auto;
    min-width: 200px;
    max-width: 500px;
    border: 3px solid #c1c1c1;
    overflow: auto;
    position: relative;
}

#menu {
    float: left;
    position: absolute;
    top: 5px;
    left: 5px;
}

#content {
    margin-left: 60px;
    float: left;
}

JavaScript

var menu = $('#menu'),
    menuH = menu.height();

menu.css({
    marginTop: -menuH / 2,
    height: menuH,
    top: '50%'
});