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://jp.igniteui.com/js/external/FileSaver.js"></script>
<script src="https://jp.igniteui.com/js/external/Blob.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://cdn-na.infragistics.com/igniteui/latest/js/infragistics.excel-bundled.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/modules/infragistics.gridexcelexporter.js"></script>
<script src="https://jp.igniteui.com/js-data/employee-data-allDatatypes"></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>

<div class="group-fields">
            <div class="item">
                <div id="sorting" class="optionContainer"></div>
                <label class="item-label" for="sorting">並べ替え</label>
            </div>
            <div class="item">
                <div id="summaries" class="optionContainer"></div>
                <label class="item-label" for="summaries">集計</label>
            </div>
            <div class="item">
                <div id="colfixing" class="optionContainer"></div>
                <label class="item-label" for="colfixing">列の固定</label>
            </div>
            <div class="item">
                <div id="styling" class="optionContainer"></div>
                <label class="item-label" for="styling">グリッドのスタイル設定</label>
            </div>
        </div>
       ...

CSS

#exportButton {
                margin-bottom: 8px;
            }
            .optionContainer{
				display: inline-block;
			}
			.item {
				display: inline-block;
				height: 30px;
			}
			.item ~ .item {
				margin-left: 15px;
			}
			.item-label {
				display: block;
				float: right;
				margin-left: 5px;
                line-height: 21px;
			}
            .exporting-overlay {
                position: absolute;
                background-color: rgba(181, 181, 181, 0.9);
                top: 0;
                left: 0;
                z-index: 100000;
                text-align: center;
                vertical-align: top;
                padding-top: 100px;
            }
            .exporting-overlay:after {
                content: "";
                display: inline-block;
                vertical-align: middle;
                height: 100%;
            }
            .exporting-text {
                font-size: 46px;
                font-weight: bold;
                vertical-align: top;
            }

JavaScript

$(function () {
            var keys = ["EmployeeID", "FirstName", "LastName", "RegistererDate", "Country", "Age", "IsActive", "Company"],
                columnsToSkip = [];

            $("div.optionContainer:lt(4)").igCheckboxEditor();
            $("select").igCombo({ width: "150px", mode: "dropdown"});
            $("#colstoskip").igCombo({
                width: "150px",
                mode: "dropdown",
                dataSource: keys,
                multiSelection: {
                    enabled: true,
                    showCheckboxes: true
                }
            });
            $("fieldset").show();
            $("#grid1").igGrid({
                autoGenerateColumns: false,
                width: "100%",
                primaryKey: "EmployeeID",
                autofitLastColumn: true,
                columns: [
                    { headerText: "従業員 ID", key: "EmployeeID", dataType: "string", hidden: true },
                    { headerText: "名字", key: "LastName", width: "15%", dataType: "string" },
                    { headerText: "国", key: "Country", width: "15%", dataType: "string" },
                    { headerText: "年齢", key: "Age", width: "15%", dataType: "number" },
                    { headerText: "アクティブ", key: "IsActive", width: "15%", dataType: "bool", format: "checkbox" },
                    { headerText: "会社", key: "Company", width: "20%", dataType: "string", unbound: true, formula: function () { return "http://infragistics.com/"; } },
                    { headerText: "登録日付", key: "RegistererDate", width: "20%", dataType: "date" }
                ],
                dataSource: employees,
                primaryKey: "EmployeeID",
                features: [
                    {
                        name: "Filtering"
                    },
                    {
                        name: "Sorting",
                        mode: "multi",
                    },
                    {
                        name: "Paging",
...