JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <header></header>
  <main></main>
  <aside></aside>
</div>

CSS

header { height:100px; background:#c0c0c0; margin:0 0 30px 0; }
main { height:600px; background:#2f2f2f; width: 100%; float: unset;}
aside { background: #f00; width:250px; height:600px; position: fixed; top:130px; left:0;}

@media(max-width:1700px) {
	main {float:right; }
}

JavaScript

$(window).on('resize load', function(){
	calc = ($(window).width() - $('.container').width() - $('aside').width()- $('aside').width()) / 2 - 25;
	
	if($(this).width() < 1700 ) {
		$('main').css({'width' : 'calc(100% + '+ calc +'px)'})
	}
	else {
		$('main').css({'width' : '100%'})
	}
	
})