JSFiddle - React, Tailwind, and code Playground
HTML
<div class="Mlt">
<p>Hello</p>
<p>Content</p>
</div>
<!-- Display div width -->
<div id="div-width"></div>
CSS
.Mlt {
background-color: grey;
min-width: 60px;
max-width: 510px;
}
JavaScript
const div = document.querySelector('.Mlt');
window.addEventListener('resize', () => {
if (div.clientWidth >= window.innerWidth - 20) {
div.style.width = div.clientWidth - 30 + "px";
} else if (div.clientWidth < window.innerWidth - 20) {
div.style.width = div.clientWidth + 30 + "px";
}
// Display div width
document.getElementById('div-width').innerHTML = div.style.width;
})