JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class='container full'>
    <div class='sidebar'>
    </div>
    <div class='table'>
        Text starts here...
    </div>   
    <button>Click me!</button>
</div>

CSS

.container .sidebar {
    float: left;
    width: 0%;
    height: 300px;
    
    background-color: blue;
    
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
.container.full .sidebar {
    width: 30%;
}

.container .table {
    float: right;
    width: 100%;
    height: 100px;
    
    background-color: green;
    color: white;
    
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
.container.full .table {
    width: 70%;
}

button {
    float: right;
}

JavaScript

$('button').click(function () {
    $('.container').toggleClass('full');
});