JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.5.1/mootools-core-full-compat.js"></script>
<div class="container slide-into">
    <div class="sidemenu">
        <ul>
            <li>Menu item 1</li>
            <li>Menu item 2</li>
            <li>Menu item 3</li>
            <li>Menu item 4</li>
            <li>Menu item 5</li>
        </ul>
    </div>
    <div class="content">
        <div class="side-bar">
            <i class="glyphicon glyphicon-menu-hamburger"></i>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis varius lobortis lacus, vitae eleifend est rhoncus a. Pellentesque ac lacus eu diam cursus vestibulum. Duis a mi ut est pulvinar placerat quis id dui. Donec rutrum nisl ut sem eleifend et congue enim consequat.</p>
        
        <p>Duis elit metus, eleifend vel gravida at, ullamcorper in odio. Aliquam laoreet nibh hendrerit purus fringilla interdum. Etiam libero quam, faucibus vitae viverra in, commodo sed arcu. Aliquam libero mi, sollicitudin non venenatis mollis, pulvinar a sem. Nullam vel magna mauris, eu pretium est. Suspendisse potenti.</p>
    </div>
</div>

<div class="container slide-over">
    <div class="sidemenu">
        <ul>
            <li>Menu item 1</li>
            <li>Menu item 2</li>
            <li>Menu item 3</li>
            <li>Menu item 4</li>
            <li>Menu item 5</li>
        </ul>
    </div>
    <div class="content">
        <div class="side-bar">
            <i class="glyphicon glyphicon-menu-hamburger"></i>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis varius lobortis lacus, vitae eleifend est rhoncus a. Pellentesque ac lacus eu diam cursus vestibulum. Duis a mi ut est pulvinar placerat quis id dui. Donec rutrum nisl ut sem eleifend et congue enim consequat.</p>
        
        <p>Duis elit metus, eleifend vel...

CSS

.container {
    border: 1px solid black;
    position: relative;
    margin-top: 15px;
    margin-bottom: 15px;
    overflow: hidden;
}

.sidemenu {
    width: 120px;
    background-color: grey;
    padding: 10px;
    position: absolute;
    top: 0px;
    left: -120px;
    bottom: 0px;
    transition: left 500ms ease-in-out 0s;
}

.content {
    padding-left: 30px;
    transition: padding 500ms ease-in-out 0s;
}

.side-bar {
    width: 30px;
    text-align: center;
    background-color: black;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    transition: left 500ms ease-in-out 0s;
}

.side-bar i {
    font-size: 18px;
    color: white;
    cursor: pointer;
}

ul {
    list-style: none outside none;
    margin: 0px;
    padding: 0px;
}

p {
    margin: 0px;
    padding: 10px 0;
}

.container.active .sidemenu {
    left: 0px;
}

.container.active .side-bar {
    left: 120px;
}

.slide-into.active .content {
    padding-left: 150px;
}

JavaScript

$$('.side-bar i').addEvent('click', function(e) {
    var el = e.target;
    el.getParent('.container').toggleClass('active');
});