JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <div class="container-fluid" style="width: 100%; height: 100%;">
            <div class="row" id="header">
                <div class="col-md-12" style="height: 100%;">
                    <header>
                    </header>
                </div>
            </div>
            <div class="row height80" id="row-main">
                <div class="col-md-2 sidebar" id="sidebar-left">
                    <nav>
                    </nav>
                </div>
                
                    <div class="col-md-8 content" id="content">
                        <form method="post" >
                            <div class="left">
                                <button class="btn btn-primary btn-xs toggle-sidebar-left" type="button">
                                    <span class="glyphicon glyphicon-triangle-left" style="font-size: 9px;" id="leftSpan"/>
                                </button>
                            </div>
                            <div class="right">
                                <button class="btn btn-primary btn-xs toggle-sidebar-right" type="button">
                                    <span class="glyphicon glyphicon-triangle-right" style="font-size: 9px;" id="rightSpan"/>
                                </button>
                            </div>
                            <div class="top">
                                <button class="btn btn-primary btn-xs toggle-header" type="button">
                                    <span class="glyphicon glyphicon-triangle-top" style="font-size: 9px;" id="headerSpan"/>
                                </button>
                            </div>
                            <div class="bottom">
                           ...

CSS

html, body, .sidebar, #content {
                height: 100%;
            }
            .sidebar {
                background-color: lightgray;
                -webkit-transition: margin 0.3s ease;
                -moz-transition: margin 0.3s ease;
                -o-transition: margin 0.3s ease;
                transition: margin 0.3s ease;
            }
            .collapsed {
                display: none;
            }
            .left {
                left: 0px;
                bottom: 0px;
                top: 50%;
                position: absolute;
            }
            .right {
                right: 0px;
                bottom: 0px;
                top: 50%;
                position: absolute;
            }
            .top {
                top: 0px;
                right: 0px;
                bottom: 0px;
                left: 50%;
                position: absolute;
            }
            .bottom {
                right: 0px;
                bottom: 0px;
                left: 50%;
                position: absolute;
            }
            .fullHeight {
                height: 100%;
            }
            .height90 {
                height: 90%
            }
            .height80 {
                height: 80%
            }
            @media (min-width: 992px) {
                .collapsed {
                    display: block;
                }
                #sidebar-left.collapsed {
                    margin-left: -16.6667%;                    
                }
                #sidebar-right.collapsed {
                    margin-right: -16.6667%;
                }
                #header.collapsed {
                    display: none;
                    margin-top: -10%;
                }
                #footer.collapsed {
                    display: none;
                    margin-bottom: -10%;
                }
            }
            #row-main {
                overflow: hidden;
            }
            #header, #footer...

JavaScript

$(document).ready(function() {
                function toggle(side) {
                    if (side !== "left" && side !== "right" && side !== "top" && side !== "bottom") {
                        return false;
                    }

                    var left = $("#sidebar-left");
                    var right = $("#sidebar-right");
                    var top = $("#header");
                    var bottom = $("#footer");
                    var content = $("#content");
                    var rowMain = $("#row-main");
                    var leftSpan = $("#leftSpan");
                    var rightSpan = $("#rightSpan");
                    var headerSpan = $("#headerSpan");
                    var footerSpan = $("#footerSpan");
                    var openTopBars = 0;
                    var openSideBars = 0;
                    var contentClass = "";
                    var leftSpanClass = "";
                    var rightSpanClass = "";
                    var headerSpanClass = "";
                    var footerSpanClass = "";
                    var rowMainClass = "";

                    if (side === "left") {
                        left.toggleClass("collapsed");
                    } else if (side === "right") {
                        right.toggleClass("collapsed");
                    } else if (side === "top") {
                        top.toggleClass("collapsed");
                    } else if (side === "bottom") {
                        bottom.toggleClass("collapsed");
                    }

                    if (!left.hasClass("collapsed")) {
                        openSideBars += 1;
                        leftSpanClass = "glyphicon glyphicon-triangle-left";
                    } else {
                        leftSpanClass = "glyphicon glyphicon-triangle-right";
                    }

                    if (!right.hasClass("collapsed")) {
                        openSideBars += 1;
                        rightSpanClass = "glyphicon...