obdev/app/views/home/participant.html.erb

<h1>Participant</h1>

<div class="container mt-4">
  <table class="table">
    <tbody>
      <tr>
        <th scope="row">Program</th>
        <td><input type="text" class="form-control"></td>
        <th scope="row">MCI</th>
        <td><input type="text" class="form-control"></td>
      </tr>
      <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>

<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>