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>
<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>

<form id="form1" class="submit-form">
		<div id="editors">
			<h3>Infragistics Professional の構成</h3>
			<div class="group-fields">
				<div id="suite"></div>
				<label for="suite" class="inline">UI コンポーネント</label>
			</div>
			<div class="group-fields">
				<div id="icon"></div>
				<label for="icon" class="inline">アイコン パック</label>
			</div>
			<div class="group-fields">
				<div id="indigo"></div>
				<label for="indigo" class="inline">Indigo Studio</label>
			</div>
			<input type="submit" id="order" value="注文"></input>
		</div>
	</form>
	<div class="submit-container">
		<h3>送信した値</h3>
		<div class="submit-container">
			<p id="results"></p>
		</div>
	</div>
	<div class="clear"></div>

CSS

h3 {
            font-size:20px;
            margin-bottom:20px;
        }
        .group-fields {
            margin-bottom: 10px;
        }
        .group-fields .inline {
            display:inline;
        }
        .group-fields .ui-igcheckbox-normal {
            margin-right: 5px;
            float: left;
        }
        .submit-form {
            float: left;
            width: 400px;
            min-width: 400px;
        }
		.submit-container
        {
            top: 0px;
            right: 0px;
            min-width: 400px;
            float: right;
            font-size: 18px;
        }

			.submit-container h3 {
				display: none;
			}

            .submit-container p
            {
                font-size: 16px;
            }
				.submit-container p.result {
					margin-top: 10px;
					margin-bottom: 10px;
				}
				.submit-container span.result-name {
					font-weight: bold;
					text-transform: capitalize;
				}

		.clear {
			clear: both;
		}

JavaScript

$(function () {
        	$("#suite").igCheckboxEditor({
        		inputName: "suite",
                checked: true,
                readOnly: true,
				value: "suite"
            });
        	$("#icon").igCheckboxEditor({
        		inputName: "icon",
                checked: false
            });
        	$("#indigo").igCheckboxEditor({
        		inputName: "indigo",
        		checked: true,
                disabled: true
        	});

        	$("#form1").submit(function (event) {
        		var submittedValues = $("#form1").serializeArray();

        		$("#results").empty();

        		$(".submit-container h3").show();
        		for (var i = 0 ; i < submittedValues.length; i++) {
        			$("#results").append("<p class='result'><span class='result-name'>" + submittedValues[i].name.replace(/([A-Z])/g, ' $1') + ":</span>  " + submittedValues[i].value + "</p>");
        		}

        		return false;
        	});
        });