JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
Before the dialog is drag all works. After this the height in dialog isn't changing
<br/><button id="button">click</button>

<div id="dialog" style="display:none">
    <div id="accordion">
		<h3>Click Me</h3>
		<div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tortor neque, fringilla nec lorem non, euismod interdum nulla. Maecenas quis nibh nec neque porttitor accumsan. Aliquam in congue libero, eget tincidunt libero. Integer venenatis et lacus eu sodales.
		</div>
	</div>
</div>

JavaScript

$('#button').button().click(function(){
    $("#dialog").dialog({ 
    modal:true,
    resizable:false,
    //maxHeight:300,
    width:400,
    title:'t',
    open:function(){
        $("#accordion").accordion({ collapsible:true,heightStyle:'content',	active:'false'});
    }
});
});