JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    Crappy:
    <a class="slideUp" href="#">Slide Up</a> | <a class="slideDown" href="#">Slide Down</a>
    <div class="slideThis topBox">Top Box</div>
    <div class="bottomBox">Bottom Box</div>
</div>

<div class="wrapper">
    Nicely:
    <a class="slideUp" href="#">Slide Up</a> | <a class="slideDown" href="#">Slide Down</a>
    <div class="slideThis"><div class="topBox">Top Box</div></div>
    <div><div class="bottomBox">Bottom Box</div></div>
</div>

CSS

.wrapper{float:left;width:300px;}

.topBox {
    width: 200px;
    height: 100px;
    border: 20px solid #0000cc;
    background-color: blue;
    margin:10px;
}

.bottomBox {
    width: 200px;
    height: 100px;
    border: 20px solid #006000;
    margin:0 10px;
    background-color: green;
}

JavaScript

$('.slideUp').click(function () {
    $(this).siblings('.slideThis').slideUp();
});
$('.slideDown').click(function () {
    $(this).siblings('.slideThis').slideDown();
});