JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mycontainer" class='centered'>
    <div id="mycontent" class='centered'>
        <span>I'm a centered div</span>
    </div>
    <button id="mybutton">click to remove centering</button>
</div>

CSS

#mycontainer {
    height: 400px;
    width: 400px;
     border: 1px solid grey;
    background-color: grey;
}

#mycontent {
    width: 100px;
    border: 1px solid blue;
    text-align: left;
    -webkit-transition: margin 2s;
    -ms-transition: margin 2s;
    -moz-transition: margin 2s;
    transition: margin 2s;
    margin-left: 0;
}
#mycontent.centered {
    margin: 0 150px;
}
.centered {
    display: block;
    text-align: center;
    margin: 0 auto;
}

#container .centered {
    display: inline-block;
    float: none;
    vertical-align: middle;
}

JavaScript

$("#mybutton").on("click",function() {
    //$("#mycontainer").removeClass("centered");
    $("#mycontent").removeClass("centered");
    $("#mycontent").text("Any way to slow that transition down?");
});