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/angular.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://cdn-na.infragistics.com/igniteui/latest/js/extensions/igniteui-angularjs.js"></script>
<script src="https://jp.igniteui.com/js-data/northwind-products"></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 ng-app="sampleApp" ng-controller="comboController">
        <div class="row">
            <div class="col-sm-2">
                <input id="product-id" class="form-control" type="text" ng-model="combo.value1"></input>
                <div class="text-sm text-muted text-right">値: 1 - 20</div>
            </div>
            <div class="col-sm-3">

                <ig-combo id="combo1" data-source="data" value-key-type="number" value-key="ProductID" text-key-type="string" text-key="ProductName" ng-model="combo.value1">
                </ig-combo>

            </div>
            <div class="col-sm-3">

                <ig-combo id="combo2" data-source="data" value-key-type="number" value-key="ProductID" text-key-type="string" text-key="ProductName" ng-model="combo.value1">
                </ig-combo>

            </div>
        </div>

        <h2 class="h3">製品名の編集</h2>
        <div class="row">

            <div class="col-sm-3" ng-repeat="record in data">
                <input...

CSS

.row{
            margin-right:0;
            margin-left:0;
        }

        .col-sm-2 {
            width: 16.666667%;
        }

        .col-sm-3 {
            width: 20%;
        }

        .form-control {
            display: block;
            width: 100%;
            padding: .375rem .75rem;
            font-size: 1rem;
            line-height: 1.5;
            color: #55595c;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: .25rem;
        }

        div.row > div {
            display: inline-flex;
            padding: 0 2% 0 2%;
        }

        div.row:last-of-type {
            padding-top: 1%;
        }
       
        div.row:first-of-type > div {
             display: inline-block;
             float:left;
        }

        h2 {
            padding-top: 4%;
            clear: both;
        }

JavaScript

$(function () {
var sampleApp = angular.module('sampleApp', ['igniteui-directives']);
        sampleApp.controller('comboController', function ($scope) {
            $scope.data = northwindProducts.results;

            $scope.combo = {
                value1: 20,
                value2: "Chang"
            };
        });
});