JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<link href="http://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-git.js"></script>
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>

<textarea></textarea>

initial textarea outer width: <span class="textarea-width"></span><br />
initial ui-Wrapper outer width: <span class="ui-wrapper-width"></span>

CSS

textarea {
    border: 1px solid #000;
    width: 200px;
    height: 48px;
    padding: 0 0 0 3px;
    margin: 0;
}

.ui-wrapper {
    padding: 0 !important;
    margin: 0 !important;
}

JavaScript

$.widget( "ui.resizable", $.ui.resizable, {
    _create: function() {
        this._super();
        this.element.outerWidth( this.originalElement.outerWidth() );
    }
});

$('textarea').resizable({
    handles: "se"
});

$('.textarea-width').text($('textarea').outerWidth());
$('.ui-wrapper-width').text($('.ui-wrapper').outerWidth());