Html – Flexible table where 2 cells collapse into one

I am making a table with inputs and I ran into the challenge of needing to collapse two cells into one when the screen size decreases without duplicating the content of the cell that collapses. In other words, I want to use only media queries and CSS to collapse the two cells without duplicating the cells content. I would rather only use media queries than programmatically edit the DOM.

To be more specific, I don’t want this:

<thead>
  <tr>
    <th scope="col" className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0">
      Name
  </th>
  <th
    scope="col"
    className="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 lg:table-cell"
  >
    Title
  </th>
  <th
    scope="col"
    className="hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 sm:table-cell"
  >
    Email
  </th>
</thead>
<tbody className="divide-y divide-gray-200 bg-white">
  <tr>
    <td className="w-full max-w-0 py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:w-auto sm:max-w-none sm:pl-0">
      My Name
      <dl className="font-normal lg:hidden">
        <dt className="sr-only">Title</dt>
        <dd className="mt-1 truncate text-gray-700">My Duplicated Title</dd>
        <dt className="sr-only sm:hidden">My Duplicated Email</dt>
        <dd className="mt-1 truncate text-gray-500 sm:hidden">{person.email}</dd>
      </dl>
    </td>
    <td className="hidden px-3 py-4 text-sm text-gray-500 lg:table-cell">My Title</td>
    <td className="hidden px-3 py-4 text-sm text-gray-500 sm:table-cell">My Email</td>
  </tr>
</tbody>

(I’m using tailwind and react by the way.)

Instead, I want a way of collapsing cells onto one another without having to duplicate the content of the collapsed cell. My last resort would be to use window.matchMedia.

The reason not wanting to duplicate content is that I am using an input field that cannot be duplicated. I hope I made sense.