JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper_update">
    <div class="update_content">
        <div class="social_media_updates_extended_view">
            <p>Karel de Bruin</p>
        </div>
        <div class="wrapper_update_extend">
            <div class="update_extend">
                <span class="btnFadeIn">fade button span</span>
            </div>
        </div>
    </div>
</div>

<div class="wrapper_update">
    <div class="update_content">
        <div class="social_media_updates_extended_view">
            <p>Karel de Bruin</p>
        </div>
        <div class="wrapper_update_extend">
            <div class="update_extend">
                <span class="btnFadeIn">fade button span</span>
            </div>
        </div>
    </div>
</div>

<div class="wrapper_update">
    <div class="update_content">
        <div class="wrapper_update_extend">
            <div class="update_extend">
                <span class="btnFadeIn">fade button span</span>
                        <div class="social_media_updates_extended_view">
            <p>Karel de Bruin</p>
        </div>
            </div>
        </div>
    </div>
</div>

CSS

.wrapper_update{
    display: table;
    overflow: hidden;
    margin-left:40px;
    width: 570px;
    margin-bottom:20px;
    background-image: url('../images/backend/background_wrapper_update.png');
    background-position: bottom left;
    background-repeat: no-repeat;
    float: left;
    padding-bottom: 20px;
    color: #636363;
}

.wrapper_update p{
    margin: 0px;
}

.wrapper_update img{
    float: left;
}

.update_avatar{
    margin-bottom:15px;
    margin-right:15px;
    float:left;
}

.update_avatar img{
    border: 5px solid #e6e7e6;
}

.update_content{
    margin-top:10px;
    width:445px;
    float:left;
}

.update_content p{
    background-color: #f7f8f7;
    padding: 10px;
}

.border_margin_update_image{
    float: left;
    background-color: #ffffff;
    padding-bottom: 15px;
}

.wrapper_update_extend{
    display: table-cell;
    vertical-align: middle;
}

.update_extend{
    margin-right:10px;
    margin-top:10px;
    float:right;
}
.social_media_updates_extended_view_arrow {
    position:absolute;
    margin-left:-35px;
    margin-top: 13px;
}

.social_media_updates_extended_view{
    border-radius:5px;
    color: #9f9f9f;
    margin-left: 125px;
    padding:20px;
    width:250px;
    position:absolute;
    background-image: url('../images/backend/background_extended_view.png');
}

.social_media_updates_extended_view_avatar{
    border:5px solid #424742;
    margin-right:15px;
}

.social_media_updates_extended_view_content{
    color: white;
}

JavaScript

jQuery(document).ready(function() {
    jQuery('.social_media_updates_extended_view').hide();

    jQuery(".wrapper_update_extend span,").css('cursor', 'pointer').click(function() {
        var $this = $(this);
        $('.social_media_updates_extended_view').not($this.next("div")).fadeOut(200);
        $this.next("div").fadeToggle(200);
        $this.parent().parent(".wrapper_update_extend").siblings(".social_media_updates_extended_view").fadeToggle(200);
    });

});