JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container nav-closed">
    <div class="nav"><a id="x" href="#">x</a></div>
    <div class="main">
        <p>Content goes here</p>        
    </div>
</div>

CSS

html {
    height: 100%;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    height: 100%;
}

.container {
    position: relative;
    height: 100%;
}

.nav {
    left: 0;
    width: 200px;
    border-color: red;
}

.main {
    border-color: blue;
    left: 210px;
    right: 0;
}

.nav,
.main {
    position: absolute;
    top: 0;
    bottom: 0;
    border-style: solid;
    border-width: 5px;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}

.nav-closed .nav {
    width: 10px;
}

.nav-closed .main {
    left: 20px;
}

JavaScript

YUI().use('node-base', 'event-base', function(Y) {
    'use strict';
    
    var container = Y.one('.container');
    
    Y.one('#x').on('click', function(e) {
        container.toggleClass('nav-closed');
        e.preventDefault();
    });
});