JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://connect.facebook.net/en_US/all.js"></script>
Drag slider to change size:
<div id="slider"></div>

<div class="fb_container">
        <div style='background-color:red;' class="fb-comments" data-href="https://developers.facebook.com/docs/plugins/comments#configurator" data-num-posts="10"></div>
</div>

CSS

.fb_container{
   width: 200px;
}

.fb-comments, .fb-comments * {
    width:100% !important;
}

#slider{
    margin: 10px 0px;
}

JavaScript

window.fbAsyncInit = function() {
        FB.init({
            appId  : '455822694428543',
            status : true,
            cookie : true,
            xfbml  : true
        });
    };



    $( "#slider" ).slider({
        min: 0,
        max: 100,
        slide: function(event,ui){
            $(".fb_container").css("width",ui.value+"%");
        }
        
    });