JSFiddle - React, Tailwind, and code Playground
HTML
<div id="wrapper" class="wrapper">
<div class="inner">Some text</div>
<div class="inner">Some text</div>
<div class="inner">Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text
Some text Some text </div>
</div>
<button id="button">Toggle</button>
CSS
.wrapper {
display: flex;
flex-direction: column;
width: 300px;
}
.wrapper.static {
height: 500px;
}
.inner {
outline: 1px solid black;
flex-grow: 1;
flex-basis: 0;
}
JavaScript
var button = document.getElementById('button');
var wrapper = document.getElementById('wrapper');
button.addEventListener('click', function() {
wrapper.classList.toggle('static');
});