JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<div class="container" style="padding-top:10px">


  <table>
    <tr>
      <td><input type="text" id="searchInput" value="" style="width:300px" /></td>
      <td> <input type="button" value="Search" onclick="Load();" /></td>
      <td>
        <div id="exTime">

        </div>
      </td>
      <td>
        <div id="exTime2">

        </div>
      </td>
    </tr>
  </table>




  <div>
    <div id="stack" class="alert alert-success" style="display:none"> </div>
    <table id="resTable" style="widht:100% ;display:none" class="table table-striped table-bordered">
      <tr>
        <th>Wikipedia</th>
        <th>Techopedia + Webopedia (Google)</th>
      </tr>
      <tr>
        <td style="width:50%;vertical-align:top">
          <div id="list2">

          </div>
        </td>
        <td style="width:50%;vertical-align:top">
          <div id="list">

          </div>
        </td>
      </tr>
    </table>

  </div>

</div>
<script>
  $("#searchInput").keyup(function(event) {
    if (event.keyCode === 13) {
      Load();
    }
  });

  function Load() {
    $("#list").empty();
    $("#list2").empty();
    $("#stack").empty();
    $('#resTable').hide();
    $("#stack").hide();

    $("#exTime").val();


    let start_time = new Date().getTime();

    var input = $("#searchInput").val();
    $.getJSON('https://www.googleapis.com/customsearch/v1/siterestrict?key=AIzaSyC-Bmq78IfVB8LDxSQa4eCbS5-AgxqeYv0&cx=014180547491404803949:wzgncd9h0h8&q=' + encodeURIComponent(input) + '&callback=?', function(response) {

      let request_time = new Date().getTime() - start_time;


      $("#exTime").text("Time taken google  " + request_time + " ms ");

      var pages = response.items;
      console.log(pages);
     ...