JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <div class="form-horizontal" style="margin-top:5em;">
    <div class="input-group">
      <input class="form-control form-control-sm" id="FunctionBookSearchForEvents" placeholder="Search for Events" style="font-size:12px;">
      <button class="btn btn-sm btn-secondary" href="events.phtml?TableID=''" data-id="" style="margin-left:1em; font-size:12px;">Add Event</button>
    </div>

    <div id="Table">
      <table class="table table-sm">
        <thead>
          <tr>
            <th>ID</th>
            <th>Event Name</th>
          </tr>
        </thead>
        <tbody>
          <tr data-key="12">
            <td>12</td>
            <td>Test Event 12</td>
          </tr>
          <tr data-key="13">
            <td>13</td>
            <td>Test Event 13</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  Run code snippet