Split table row into two rows without specifying height

[KeredDrahcir]

I am trying to include a table on a mobile responsive design. The table only has two columns but on the lowest resolutions the table takes up too much horizontal space.
I'm quite happy to display the columns as two rows and I have a way to achieve this but it causes problems if one of the fields is long enough to go onto more than one line.

I can recode the table as divisions but I'd like to try and avoid that if possible.

<table width="100%" border="0" class="my_table">
    <tr style="position: relative;">
            <td>First Name </td>
            <td>Sarah</td>
          </tr>
      <tr>
          <td>Last Name </td>
         <td>Bellum</td>
    </tr>
    <tr>
              <td>Company Name</td>
            <td>ABC Company Limited</td>
          </tr>
</table>
 

The CSS that spilt the table is below

.my_table { position: relative;}
.my_table tr { height: 50px; position: relative;}
.my_table tr td:last-child { padding-top: 25px; position: absolute; left: 0;}
 

I’d prefer not to recode the table into divisions if I can avoid it. Is there any way to do it without giving the table row a height so that it the last cell runs onto more than one line then it won't display over the next row?

Is there any other approach I can do?