JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div>
        <input id="display_none" type="radio" name="v"  />
        <label for="display_none">display: none</label>
    </div>
    <div>
        <input id="visibility_hidden" type="radio" name="v"  />
        <label for="visibility_hidden">visibility: hidden</label>
    </div>
    <div>
        <input id="display_inline-block" type="radio" name="v" checked="checked" />
        <label for="display_inline-block">display: inline-block</label>
    </div>
    
</div>
<br>

<div class="container">
    <div class="box main"></div>
    <div class="box"></div>
</div>

CSS

.box {
    width : 50px;
    height : 50px;
    background : #00FF94;
    display: inline-block;
    transition : margin ease .5s;
}

.container {
    margin-top : 10px;
}

.main {
    background : #30E7C4;
}

.shift {
    margin-left : 20px;
}

JavaScript

setInterval(function () {
    $(".main").toggleClass("shift");
}, 500);

$("[type=radio]").on("change", function (e) {
    var $main = $(".main").removeAttr("style");
    
    $.fn.css.apply($main, e.target.id.split('_'));
})