JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<div id="resizer">
    <div id="inner-resizer">
        <div id="container" style="width:100%;height:100%;">
        </div>
    </div>
</div>


<script type="text/javascript" src="http://highcharts.com/js/testing-stock.js"></script>
<script type="text/javascript" src="http://highcharts.com/samples/data/three-series-1000-points.js"></script>

CSS

#resizer {
    border: 1px solid silver;   
}
#inner-resizer { /* make room for the resize handle */
    padding: 10px;
}
#container{height:100%;width:100%;}

JavaScript

$(function() {

    $('#resizer').resizable({
        // On resize, set the chart size to that of the 
        // resizer minus padding. If your chart has a lot of data or other
        // content, the redrawing might be slow. In that case, we recommend 
        // that you use the 'stop' event instead of 'resize'.
        resize: function() {
            chart.setSize(
                this.offsetWidth - 20, 
                this.offsetHeight - 20,
                false
            );
        }
    });


    var chart = new Highcharts.StockChart({
        
        chart: {
            renderTo: 'container'
        },
        
        yAxis: [{
            title: {
                text: 'GOOGL'
            }
        }, {
            title: {
                text: 'MSFT'
            },
            gridLineWidth: 0,
            opposite: true
        }],
        
        rangeSelector: {
            selected: 1
        },
        
        series: [{
            name: 'GOOGL',
            data: GOOGL
        }, {
            name: 'MSFT',
            data: MSFT,
            yAxis: 1
        }]
    });
});