JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="element1">
        <div class="same">a</div>
        width: <input type="text" id="width" value="100"><br/>
        height: <input type="text" id="height" value="100">
    </div>
    <div id="element2">
        <div class="same">b</div>
        width: <input type="text" id="width" value="100"><br/>
        height: <input type="text" id="height" value="100">
    </div>
</div>

CSS

.same {
    background: steelblue;
    display: block;
    width: 100px;
    height: 100px;
}

#element1 {
    background: #cccccc;
    padding: 10px;
}

#element2 {
    background: #aaaaaa;
    padding: 10px;
}

JavaScript

var changeIndex = -1;

function setToSame() {
    if(changeIndex!=-1) {
        console.log("test");
    $('.same').height($('.same').eq(changeIndex).height());
    $('.same').width($('.same').eq(changeIndex).width());
        changeIndex = -1;
    }
}

$('input').change(function() {
    $(this).parent().children('.same').css($(this).attr('id'), $(this).val() +'px');
    
    // set the changeIndex to the current change div
    changeIndex = $('.same').index($(this).parent().children('.same'));
    console.log(changeIndex);
});

setInterval(setToSame, 4);