JSFiddle - React, Tailwind, and code Playground
HTML
<div class="first-div"></div>
<div class="second-div">
<div class="inner-div">Test</div>
</div>
<button onclick="toggle()">Toggle Border</button>
CSS
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.first-div {
background-color: red;
min-height: 50px;
}
.second-div {
background-color: blue;
min-height: 50px;
overflow:auto;
}
.inner-div {
margin: 10px;
text-align: center;
}
JavaScript
toggle = function () {
if (document.getElementsByClassName('second-div')[0].style.border) {
document.getElementsByClassName('second-div')[0].style.border = "";
} else {
document.getElementsByClassName('second-div')[0].style.border = "5px solid";
}
};