JSFiddle - React, Tailwind, and code Playground

by santosonit

HTML

<table class="table table-sm table-striped" id="dtable" style="font-size:0.9em">
  <thead style="white-space: nowrap">
    <tr>
      <th style="width: 1%" class="text-center">ClientID</th>
      <th style="width: 14%" class="text-center">Approval</th>
      <th style="width: 26%" class="text-center">Comments</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center">AA0sdsadasdsadasdsadsadsa02</td>
      <td class="align-middle"><select name="D1" style="border-radius: 0.2rem;">
          <option value="empty"></option>
          <option value="Approved">Approved</option>
          <option value="Discuss">Discuss</option>
          <option value="Rejected">Rejected</option>
        </select></td>
      <td><input type="text" name="comments" style="width:99%;"></td>
    </tr>
    <tr>
      <td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center">AA0sdsadasdsadasdsadsadsa02</td>
      <td class="align-middle"><select name="D1" style="border-radius: 0.2rem;">
          <option value="empty"></option>
          <option value="Approved">Approved</option>
          <option value="Discuss">Discuss</option>
          <option value="Rejected">Rejected</option>
        </select></td>
      <td><input type="text" name="comments" style="width:99%;"></td>
    </tr>
  </tbody>
</table>