JSFiddle - React, Tailwind, and code Playground

by Rishi Gautam

HTML

<button id='btn' onclick='shrink()'>
ShrinkToFit
</button>

<div class='container'>
</div>
<div id='child'>
</div>

CSS

.container {
  width: 300px;
  height: 300px;
  background-color: #ccc;
  position: absolute;
  opacity: .7;
}

#child {
  width: 400px;
  height: 200px;
  position: absolute;
  background-color: green;
  opacity: .7;
}

#btn {
  display: block;
}

JavaScript

document.getElementById('btn').onclick = function() {
	var child = document.getElementById('child');
  var container = document.getElementsByClassName('container')[0];
  var w = container.getAttribute('width');
  console.log('w ', w);
  child.setAttribute('style', 'width:100px');
  console.log('child ', child);
}