JSFiddle - React, Tailwind, and code Playground

HTML

<div id="hideme">This div should get hidden</div>
<button type="button" id="toggleMaskBasic">Toggle mask</button>
<button type="button" id="toggleMaskBorder">Toggle mask border</button>
<button type="button" id="toggleMaskMargin">Toggle mask margin</button>

CSS

#hideme{
    background: #eee;
    border: 4px solid #333;
    margin: 20px;
    padding: 20px;
    position: relative;    
}

.mask{
    background: rgba(100,0,0,0.7);
    bottom: 0;
    left:0;
    position: absolute;
    right: 20px;
    top:0;
    height:50px
}

JavaScript

$(function(){
    var $hideme = $('#hideme');
    $('#toggleMaskBasic').click(function(){
        toggleMask($hideme);
    });
    
    $('#toggleMaskBorder').click(function(){
        toggleMask($hideme);        
        $('.mask',$hideme).css("margin", "-="+$hideme.css('border-width'));
    });
    
    $('#toggleMaskMargin').click(function(){
        toggleMask($hideme);        
        $('.mask',$hideme).css("margin", "-="+$hideme.css('border-width'));
        $('.mask',$hideme).css("margin", "-="+$hideme.css('margin'));
    });
});

function toggleMask($hideme){
    if( $('.mask',$hideme).length == 0){
        $hideme.append('<div class="mask"></div>');
    }else{
        $('.mask',$hideme).remove();
    }
}