JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <th>
    Product Detail Display
  </th>
  <tr>
    <td> ----- Product A -----</td>
  </tr>
    <tr>
    <td> ----- Product B ----- </td>
  </tr>
    <tr>
    <td> ----- Product C ----- </td>
  </tr>
    <tr>
    <td> ----- Product D ----- </td>
  </tr>
  <tr>
    <td>
      <div class="left">Total: 4 Product(s)</div>
      <div class="right"><button>View More Products</button></div>
    </td>
  </tr>
</table>

CSS

td{
  text-align:center;
}

.left{
  width:50%;
  float:left;
}

.right{
  width:50%;
  float:right;
  text-align: right;
}