<div class="container mt-4">
  <h2>Worker</h2>
    <table class="table">
    <tbody>
      <tr>
        <th scope="row">Name</th>
        <td><input type="text" class="form-control"></td>
        <th scope="row">DOB</th>
        <td><input type="text" class="form-control"></td>
      </tr>
      <tr>
        <th scope="row">Address</th>
        <td><textarea class="form-control autoresize" rows="2"></textarea></td>
        <th scope="row">SSN</th>
        <td><input type="text" class="form-control"></td>
      </tr>
      <tr>
        <th scope="row">Phone</th>
        <td><input type="tel" class="form-control"></td>
        <th scope="row">Gender</th>
        <td><input type="text" class="form-control"></td>
      </tr>
      <tr>
        <th scope="row">Email</th>
        <td><input type="email" class="form-control"></td>
      </tr>
    </tbody>
  </table>
</div>

<br>

<div class="container mt-4">
  <h2>Participants</h2>
  <table class="table">
    <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Start Date</th>
        <th scope="col">End Date</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="text" class="form-control" ></td>
        <td><input type="date" class="form-control" placeholder="Start Date"></td>
        <td><input type="date" class="form-control" placeholder="End Date"></td>
      </tr>
      <!-- Additional rows as needed -->
    </tbody>
  </table>
</div>

<div class="container mt-4">
  <h2>Employers</h2>
  <table class="table">
    <thead>
      <tr>
        <th scope="col">Name</th>
        <th scope="col">Start Date</th>
        <th scope="col">End Date</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="text" class="form-control" ></td>
        <td><input type="date" class="form-control" placeholder="Start Date"></td>
        <td><input type="date" class="form-control" placeholder="End Date"></td>
      </tr>
      <!-- Additional rows as needed -->
    </tbody>
  </table>
    
        <button type="button" class="btn btn-outline-primary">Add New</button>
    
</div>



<script>
  document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.autoresize').forEach(function (element) {
      element.style.overflow = 'hidden';
      element.addEventListener('input', autoResize, false);
    });

    function autoResize() {
      this.style.height = 'auto';
      this.style.height = (this.scrollHeight) + 'px';
    }
  });
</script>
