JSFiddle - React, Tailwind, and code Playground

by Abhishek Nandgaonkar

HTML

<header>HEADER</header>  
<div class="nav">
NAV
<button onClick=handle()>
   Click here
</button>
</div>
<div id="container" class="container" style={{width: 30% }}>
  Container
</div>

CSS

html, body{ height:100%;}
header{ width:100%; height:50px;background:#777;}
.nav{ height: calc( 100% - 50px ); width:200px; float:left; background:#888;}
.container{ color:#fff; float:left; width:calc( 100% - 250px ); height:calc( 100% - 50px ); background:#222;}

JavaScript

var value = false
handle = () => {
	value = !value;
	if (value === true) {
  	let width = document.getElementById('container').style
		console.log(width);
  } else {
  	document.getElementById('container').style.width
  }
}