JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<div class="social-media-button-group">
    <button class="social responsive">
        <dt>Action</dt>
        <dd>100</dd>
    </button>
</div>

CSS

html {font: 80%/1.4em "Helvetica Neue", Helvetica, Arial, sans-serif;}
body {padding: 2em; width: 60%; margin: 0 auto;}

button.social {background: none; border: none; margin: 0; padding: 0; font-family: inherit; font-size: 1em; line-height: 1.2em; width: auto; overflow: visible }
* > button:last-child {margin-right: 0 !important}

button.social {cursor: pointer}

button.social {background: rgba(0,0,0,0.1)}
button.social dt {background: rgba(0,0,0,0.1)}
button.social dd {background: rgba(255,255,255,0.7)}


div.social-media-button-group {
    display: table;
    width: 100%;
    min-width: 50px;
}
div.social-media-button-group button.social {
    display: table-row;
    width: 100%;
    max-width: 500px;
    height: 30px;
    
    line-height: 30px;
}
div.social-media-button-group button.social dt,
div.social-media-button-group button.social dd {
    display: table-cell;
    height: inherit;
    width: auto;
    
    font-size: inherit;
    line-height: inherit;
}
div.social-media-button-group button.social.responsive dt {
    padding: 0 20px;
}
div.social-media-button-group button.social.responsive dd {
    width: 100%;
    padding: 0 10px;
}

div.social-media-button-group button.social.responsive dd::after {
    content: ' people have pressed this button.';
}

JavaScript

(function() {
    var SMBG = $('div.social-media-button-group');
    SMBG.each(function() {
        var $this = $(this),
            SMBGwidth = $this.width(),
            SMBGresponsive = function() {
                SMBGwidth = SMBG.width();
                     if (SMBGwidth > 500) { $this.removeClass('       large medium small xsmall micro').addClass('xlarge') }
                else if (SMBGwidth > 400) { $this.removeClass('xlarge       medium small xsmall micro').addClass('large ') }
                else if (SMBGwidth > 300) { $this.removeClass('xlarge large        small xsmall micro').addClass('medium') }
                else if (SMBGwidth > 200) { $this.removeClass('xlarge large medium       xsmall micro').addClass('small ') }
                else if (SMBGwidth > 100) { $this.removeClass('xlarge large medium small        micro').addClass('xsmall') }
                else if (SMBGwidth >  50) { $this.removeClass('xlarge large medium small xsmall      ').addClass('micro ') }
            };
        $(document).ready(SMBGresponsive);
        $(window).resize(SMBGresponsive);   
    });
})();