JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer">
    <div id="inner">
        [content here]
    </div>
</div>

CSS

#outer {
    background:green;
    position: absolute;
    top: 50%;
    left: 0px;
    width: 100%;
    height: 1px;
    overflow: visible;
}

#inner {
    border:thin solid black;
    width: 100px;
    height: 100px;
    margin-left: -50px;  /***  width / 2   ***/
    position: absolute;
    top: -50px;          /***  height / 2   ***/
    left: 50%;
}

JavaScript

//$(document).ready(function(){ 
//    $("#inner").animate({height:'200',top:'-100'},1000);
//    $("#inner").animate({width:'200'},1000);
//});

//the code above works..


//but when i add this margin-left:'-100px'

//it will not work.. the syntax is just the same as above..

$(document).ready(function(){ 
  $("#inner").animate({height:'200',top:'-100'},1000);
    $("#inner").animate({width:'200',margin-left:'-100'},1000);
});