JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<div class="row">
   <div class="block">
      <label class="label" for="startLane">Select Dropdown:</label>
      <select name="seqlineupspendinglist">
         <option value="-">--Please Select--</option>
      </select>
   </div>
   <div class="block">
      <label class="label" for="startLane">Starting Lane #:</label>
      <input type="text" id="startLane" name="startLane" />
   </div>
   <div class="block">
      <label class="label" for="endLane">Ending Lane #:</label>
      <input type="text" id="endLane" name="endLane" />
   </div>
   <div class="block">
      <input type="submit" value="Show Cases" />
   </div>
   <div class="block">
    <div>
      <label class="label">Information:</label>
    </div>
    <div>
      <div id="jqxgrid"></div>
    </div>
  </div>
</div>

<div class="row">
   <div class="block">
     <label class="label" for="startLane">Second Row Test</label>
      <input type="text" id="startLane" name="startLane" />
   </div>
   <div class="block">
      <label class="label" for="startLane">Second Row Test</label>
      <input type="text" id="startLane" name="startLane" />
   </div>
   <div class="block">
      <label class="label" for="endLane">Second Row Test</label>
      <input type="text" id="endLane" name="endLane" />
   </div>
      
</div>

CSS

.row {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  
}
.block {
  padding: 5px 1%;
}
input {
  display: block;
  height: 22px;   /* so same height as select */
  border-radius: 4px;
}
input[type="submit"] {
  height: 28px;  /* so button is same height as select and inputs */
  margin-right:100px
  }
select {
  width: 150px;  /* so --Please Select-- text is all visible */
}

JavaScript

$('[name="seqlineupspendinglist"]').select2();

var source = {
    localdata: "",
    datafields: [{
        name: 'Name',
        type: 'string'
    }, {
        name: 'Color',
        type: 'string'
    }, {
        name: 'plateName',
        type: 'string'
    }, {
        name: 'date',
        type: 'date'
    }
  ],
    datatype: "array"
};

var adapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid({
    width: 500,
    theme: 'energyblue',
    source: adapter,
    sortable: true,
    ready: function () {
        $("#jqxgrid").jqxGrid('selectrow', 0);
        $('#jqxgrid').jqxGrid('focus');
    },
    columns: [{
        text: 'Name',
        datafield: 'Name',
        columngroup: 'Name',
        width: 90
    }, {
        text: 'Color',
        columngroup: 'Color',
        datafield: 'Color',
        width: 90
    }, {
        text: 'Plate Name',
        datafield: 'plateName',
        width: 170
    }, {
        text: 'Date',
        datafield: 'date',
        width: 160,
        cellsformat: 'dd-MMMM-yyyy'
    }]
});