JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="container">
    <div id="div-1">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet tenetur provident, temporibus amet soluta facilis eum recusandae est aspernatur cupiditate. Cupiditate quasi possimus iure, numquam repellendus animi quam labore accusamus.
    </div>
    <div id="div-2">
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit consequuntur sunt optio qui commodi nam assumenda ducimus distinctio ratione deleniti laboriosam doloribus rerum dignissimos porro minus a sint officiis, pariatur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure autem placeat saepe magni tenetur facere tempora debitis, sequi reprehenderit ullam velit soluta animi id aperiam, quos, dolorum enim adipisci eaque.
    </div>
</div>

CSS

* {
    box-sizing: border-box;
}
#container {
    width: 80%;
    border: 1px solid grey;
    border-radius: 30px;
    margin: 50px auto;
    transition: 1s;
}
#container div {
    padding: 20px;
}

JavaScript

function startingHeight(){
	document.querySelector('#container').style.height = document.querySelector('#div-1').clientHeight + 'px';
}
startingHeight()

window.addEventListener('resize',function(){
	setTimeout(function(){
    	startingHeight()
    },200)
})

var obj = {
	name : document.querySelector('#container'),
    color: 'red'
}
console.log(obj.name.style.background = obj.color)


document.querySelector('#container').addEventListener('click',function(){
	this.style.height = document.querySelector('#div-1').clientHeight + document.querySelector('#div-2').clientHeight + 'px';
})