JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
    <div class="fbNubFlyoutOuter">
        <div class="fbNubFlyoutInner">
            <div class="predecessor"></div>
            <div class="fbNubFlyoutFooter">
                <div class="_552h"></div>
                <div class="other"></div>
            </div>
            <div class="successor"></div>
        </div>
    </div>
    <div class="boxMargin"></div>
    <div class="rest"></div>
</div>

CSS

._552h {
    background-color:yellow;
    border:1px solid black;
    height:50px;
    width:50px;
}
._552h.hidden_elem {
    display:none;
}
.boxMargin {
    height: 50px;
    width: 50px;
    border:1px solid black;
    background-color:green; /*should be become red when _552 is hidden*/
}
/*Maybe add a .boxMargin hidden class rule, where bkg color is red*/

JavaScript

(function ($) {
  $.each(['show', 'hide'], function (i, ev) {
    var el = $.fn[ev];
    $.fn[ev] = function () {
      this.trigger(ev);
      el.apply(this, arguments);
    };
  });
})(jQuery);

$(document).ready(function() {
    $("._552h").on("show",function() {
            $(".boxMargin").css("background-color","green");
    });
    $("._552h").on("hide",function() {
            $(".boxMargin").css("background-color","red");
    });
    $("._552h").addClass("hidden_elem");
});