JSFiddle - React, Tailwind, and code Playground

HTML

<div class="simpleClass">Some content</div>
<div id="accordion">Some accordian</div>
<div class="simpleColor">Some other div</div>

<a href="#" id="change" >Click here to Change</a>

CSS

.simpleColor{
     width:300px;
     height:100px; background-color:gray;
}
#accordion
{
         width:400px;
     height:40px; background-color:Orange;
}
.simpleClass
{
     width:200px;
     height:20px; background-color:Red;
}

JavaScript

$(function(){
    $("#change").click(function(){
        var accWidth=parseInt($("#accordion").css("width").replace("px",""));
        var simpWidth=parseInt($(".simpleColor").css("width").replace("px",""));
        var marginLeft=((accWidth/2)-(simpWidth/2));       
        $(".simpleClass").css("margin-left",marginLeft);
    });
    
    
});