JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/louisremi/jquery.transition.js/master/jquery.transition.js"></script>
<a href="#" onclick="anim();">animate</a>
<div id="header">
  <div class="col"></div>
  <div class="content">I AM FIXED POSITIONNED</div>
    <div class="col"></div>
</div>
<div id="main">I AM STATIC POSITIONNED
</div>

CSS

a {
    display:block;
    padding:5px;
    position:fixed;
    top:0;
    left:50%;
    border:1px solid #000;
    background-color:#ff0100;
    color:yellow;
    z-index:10;
    border-radius:5px;
}
#header {
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 4;
}
#header .col {
    height: 138px;
    width: 12.5%;
}
#header .content {
    height: 138px;
    width: 75%;
}
.col {
    background-color: #006;
    float: left;
}
.content {
    background-color: #FBFBFB;
    float: left;
}
#main {
    margin-left: 12.5%;
    margin-right: 12.5%;
    margin-top: 138px;
    background-color:#d1d1d1;
    height:150px;
}

JavaScript

function anim() {
    var baseSideNavWidth = 7.32421875;
    var baseContentWidth = 85.3515625;
    $('#header').find('.col').animate({width:baseSideNavWidth+'%'}, 5000);
    $('#header').find('.content').animate({width:baseContentWidth+'%'}, 5000);
    $('#main').animate({
        marginLeft:baseSideNavWidth+'%',
        marginRight:baseSideNavWidth+'%'
    }, 5000);
}