JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://jp.igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://jp.igniteui.com/js-data/company-data"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/i18n/infragistics-ja.js"></script>

<table id="grid"></table>

CSS

button
		{
			margin:0.5em 0 0.5em 0.4em;
		}

JavaScript

$(function () {
$.widget("ui.SplitterDialog", $.ui.igGridModalDialog, {
			_create: function () {
				var d = this.element, self = this, gc, header, footer, $buttonSet, $buttonOK, $buttonCancel, o = this.options, self = this,
				outerContianer;
				// get the grid's container
				gc = d.closest(".ui-iggrid");

				d.detach();
				
				outerContianer = "<div id='customContainerDiv'></div>";

				gc.wrap(outerContianer).wrap("<div></div>");
				
				gc.parent().parent().append(d);

				this._customSplitterContainer = $("#customContainerDiv");
				
				this._customSplitterContainer.igSplitter(
					{
						width: "100%",
						height: "400px",
						panels: [
							{ size: "60%" },
							{ size: "40%" }
						]
					}
					);

				// adding the header
				header = $("<div></div>")
					.addClass("ui-widget-header")
					.css("padding", "4px")
					.text(this.options.modalDialogCaptionText)
					.appendTo(d);

				//adding footer
				footer = $("<div></div>")
				//.addClass(this.css.modalDialogFooter)
				.attr("id", this._id("footer"))
				.appendTo(d);
				$buttonSet = $("<div></div>")
					.appendTo(footer);

				$buttonOK = $("<button></button>")
					.attr("id", this._id("footer_buttonok"))
					.appendTo($buttonSet);
				$buttonOK.igButton({
					labelText: o.buttonApplyText,
					title: o.buttonApplyTitle,
					disabled: o.buttonApplyDisabled,
					click: function(){
						self.closeModalDialog(true, true);
					}
				});
				$buttonCancel = $("<button></button>")
					.attr("id", this._id("footer_buttoncancel"))
					.appendTo($buttonSet);
				$buttonCancel.igButton({
					labelText: o.buttonCancelText,
					title: o.buttonCancelTitle,
					click: function () {
						self.closeModalDialog(false, true);
					}
				});

				// adding the content
				$("<div></div>")
					.css({
						"overflow": "auto",
						"height": gc.outerHeight() - header.outerHeight() - footer.outerHeight()
					})
					.attr("id", this.element.attr("id") +...