JSFiddle - React, Tailwind, and code Playground

HTML

<div id="attempt"></div>
<button id="toggle">Toggle Border</button>
<p>Border (in the ideal case) would not change the element's background. However, adding the 30px border (even when transparent), will cause the background to change size.</p>

CSS

#attempt {
    width:100px;
    height:200px;
    background:#aaa;
    margin:50px;
    box-sizing: border-box;
}

#attempt.border {
    margin:20px; /* Change margin to keep box in same place after border adds size */
    border:30px solid transparent;
}

JavaScript

$("#toggle").click(function(){
    $("#attempt").toggleClass("border");
});