JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content-wrapper">
    <button class='btn btn-danger forum-select-button'>5</button>
    <div class="metric-number">5</div>
</div>
<button class='swap-info'>Swap Info</button>

CSS

.forum-select-button {
    height: 0;
    opacity: 0;
}
.metric-number, .forum-select-button {
    -webkit-transition: opacity 500ms ease-in-out;
    -moz-transition: opacity 500ms ease-in-out;
    -o-transition: opacity 500ms ease-in-out;
    transition: opacity 500ms ease-in-out;
}

JavaScript

$('.swap-info').on('click', function () {
    $('.metric-number').css('opacity', '0').on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function () {
        $(this).css('display', 'none');
        $('.forum-select-button').css({
            'height': 'auto',
                'opacity': '1'
        });
    });
});