JSFiddle - React, Tailwind, and code Playground

by lustre

HTML

<div class="ssba">
        <span class="shareText">Share:</span>
        <span class="share-btns">
       F
            B
            D
C
D
S
        </span>
</div>

CSS

.shareText { 
    display:inline-block; 
    vertical-align:middle; 
    cursor:pointer; 
}

.share-btns { 
    width:0; 
    display:inline-block; 
    overflow:hidden; 
    transition:width 1s; 
    vertical-align:middle; 
    white-space:nowrap; 
}

.showButts { 
    width:185px; 
}

JavaScript

$(document).ready(function () {
    //$('div.ssba a').wrapAll('<span class="shareButts" />');

    $('.shareText').click(function () {
        $('.share-btns').toggleClass('showButts');
    });
});