I am facing an issue with setting a width on a specific text within my layout. In this Fiddle, I have highlighted the text in red that needs to occupy half of the column width. However, whenever I try to set a specific width, it interferes with the responsiveness of the design.
The reason for using table layouts is due to the requirement of email newsletters and utilization of the foundation framework.
How can I adjust the width of the column containing the red text without compromising its responsiveness?
<body>
<table class="body">
<tr>
<td class="center" align="center" valign="top">
<center>
<table class="row footer">
<tr>
<td class="wrapper">
<table align="center" class="container">
<tbody>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-6 columns first">
<table>
<tr>
<th style="color:red;">Details about the room</th>
</tr>
</table>
</th>
<th class="small-12 large-6 columns last">
<table>
<tr>
<th>Lorem ipsum dolor sit amet, lectus fringilla optio nulla dolorem duis, augue neque mus gravida, platea pharetra duis eros nunc eget. Integer facilis. A convallis nec libero leo tempus, facilisis ac, fringilla at quis, lectus inceptos ac eu suscipit. Porta ac dignissim nec, cursus aliquam senectus aliquam, in duis vestibulum at risus libero volutpat, mi aliquam, tristique sit nunc fermentum</th>
</tr>
</table>
</th>
</tr>
</tbody>
</table
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</body>