JSFiddle - React, Tailwind, and code Playground

by jonahe

HTML

<div class="wrapper">
  <div class="box one">
    <div class="box two">
    hello
    </div>
  </div>
  <input type="text" onchange="e => window.handleInputChange(e)" />
</div>

CSS

.wrapper {
  border: 1px dashed grey;
}

.box {
  width: 100px;
  height: 100px;
  transition: height 0s 1s ease-in-out;
}

.one {
  background-color: green;
  height: 100px;
  overflow: hidden;
  margin: 1px solid purple;
}


.two {
  background-color: red;
}

JavaScript

const boxTwo = document.querySelector(".box.two");

window.handleInputChange = function(e) {
	const val = e.target.value;
  boxTwo.style.height = value + "px";
  console.log(val);
}