2 girls one cup

app.js

console.clear()
$(function() {
	var toggle = 1;
  $('#btn-toggle').on('click', function() {
  	console.log('TOGGLE')
  	toggle += 1;
    var right = 35 * (toggle % 2);
    console.log('------- ' + right + ' -------')
    
    var lstyle = ['width: calc(' + (100 - right) + '% - ' + (right === 0 ? '2' : '1.3') + 'em);']
    var rstyle = ['width: ' + right + (right > 0 ? '%' : '') + ';'];
    if (right === 0) {
    	rstyle.push('opacity: 0;')
    } else {
       rstyle.push('opacity: 1;')
    }
    
    console.log(lstyle.join(''))
    console.log(rstyle.join(''))
    $('.right').prop('style', rstyle.join(''));
 		$('.left').prop('style', lstyle.join(''));

    
    $('#btn-toggle').text(right === 0 ? "ON" : "OFF")
  })
})

index.html

<div class="yo">
  <div class="mama">
  <div class="wrapper">
    <div class="header">
      HEAD
      <button id="btn-toggle">ON</button>
    </div>
    <div class="body">
      <div class="left"><h1>LEFT</h1></div>
      <div class="right">
        <h1>RIGHT</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro ipsum, aliquid quaerat, non cum, quia atque fugit id perferendis aut odio nihil quos assumenda ratione voluptatibus, maxime laborum amet magnam.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro ipsum, aliquid quaerat, non cum, quia atque fugit id perferendis aut odio nihil quos assumenda ratione voluptatibus, maxime laborum amet magnam.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro ipsum, aliquid quaerat, non cum, quia atque fugit id perferendis aut odio nihil quos assumenda ratione voluptatibus, maxime laborum amet magnam.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro ipsum, aliquid quaerat, non cum, quia atque fugit id perferendis aut odio nihil quos assumenda ratione voluptatibus, maxime laborum amet magnam.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro ipsum, aliquid quaerat, non cum, quia atque fugit id perferendis aut odio nihil quos assumenda ratione voluptatibus, maxime laborum amet magnam.</p>
      </div>
    </div>
  </div>
  </div>
</div>

style.css

* { box-sizing: border-box; }
body { margin: 0; }

.wrapper {
  height: calc(100vh - 2em);
  width:calc(100% - 2em);
  background-color: grey;
  display: inline-block;
  margin: 1em;
}
.header {
  height: 100px;
  background-color: cyan;
}
.body {
  overflow: hidden;
  display: inline-block;
  background-color: pink;
  width: 100%;
  transition: 0.5s;
}
.left {
  position:absolute;
  float: left;
  height: calc(100vh - 100px - 2em);
  margin-bottom: -200px;
  width: calc(65% - 1.3em);
  //width: calc(100% - 2em);
  background-color: orange;
  transition: 0.5s;
}
.right {
  float: right;
  padding: .5em;
  width: calc(35%);
  background-color: green;
  transition: 0.5s;
  height: calc(100vh - 100px - 2em);
  overflow: auto;
}