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="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>
        <p>content</p>
    </div>
    <div class="wrapper_update_extend">
        <div class="update_extend">
            <span class="btnFadeIn">fade button span</span>
        </div>
    </div>
</div>

CSS

.wrapper_update{
    display: table;
    overflow: hidden;
    margin-left:40px;
    width: 170px;
    margin-bottom:20px;
    background-image: url('../images/backend/background_wrapper_update.png');
    background-position: bottom left;
    background-repeat: no-repeat;
    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:145px;
}

.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

(function($, undefined) {
    $(document).ready(function() {
        var $container = $(".update_content");

        $container.find(".social_media_updates_extended_view").hide();

        $container.delegate(".update_extend .btnFadeIn", "click", function(event) {
            var $view = $(this).closest(".wrapper_update_extend").prev(".social_media_updates_extended_view").stop(true).fadeToggle(200);

            $container.find(".social_media_updates_extended_view").not($view[0]).stop(true).fadeOut(200);
        })
    })
})(jQuery);