JSFiddle - React, Tailwind, and code Playground

by mehulkar

HTML

Try: <button id="expand">Expand</button>

<div class="grid">
  <div class="item1 y">1</div>
  <div class="item2 r">2</div>
</div>

CSS

.grid {
   height: 100vh;
   margin: 10px;
   display: grid;
   grid-template-rows: minmax(50px, auto) 1fr;
 }
 
.grid > div { border: solid 1px; }

JavaScript

const button = document.querySelector('#expand');

let longString = 'item1 should expand. ';
for (var i = 0; i < 4; i++) {
	longString += longString;
}

button.addEventListener('click', () => {
	const item1 = document.querySelector('.item1');
	if (button.innerText.match(/expand/i)) {
		item1.innerHTML = longString;
		button.innerText = "Collapse";
	} else {
		item1.innerHTML = "1";
		button.innerText = "Expand";
  }
});