JSFiddle - React, Tailwind, and code Playground

HTML

<div id="events">
    
    <div id="fraction">div A</div>
    <div class="structures"> div  B</div>
    
    <div id="script">div C</div>
    <div class="structures" id="test">div D</div>    
</div>

CSS

#fraction,#script {
    float: left;
    width: 50px;
    height: 75px;
    border: 1px solid;
    margin-right: 5px;
    position: relative;
}
.structures {
    width: 100px;
    height: 50px;
    border: 1px solid;
    position: absolute;
    top: 150px;
    left: 50px;
    display: none;
    float: none;
}

#test {
    border: 1px solid red;
    position: absolute;
    left: 75px;
    top: 150px;  
}

JavaScript

$(function() {

    $(document).click(function() {

        $('.structures').hide();
    });
    $('#fraction').click(function(event) {

        event.stopPropagation();
        $(this).next().toggle();
    });
    $('.structures').click(function(event) {

        event.stopPropagation();
    });
});


$(function() {

    $(document).click(function() {

        $('.structures').hide();
    });
    $('#script').click(function(event) {

        event.stopPropagation();
        $(this).next().toggle();
    });
    $('.structures').click(function(event) {

        event.stopPropagation();
    });
});