Help with HTML for my Shopify page Options

[Michael F]

My page in my Shopify store has HTML to feature 4 videos (can grow). However, these 4 videos look weird on the page.
I would like to have them not so spread apart horizontally on the desktop version. On the mobile version I would prefer a stacked display with 1 video on top of the other instead of 2 videos squeezed in per row.
What is a way I can accomplish this without a CSS file. I only have the 1 area where I can put HTMl code and I don't have access to anything outside the BODY tags.

This is my page:
https://massagetherapyconcepts.com/pages/re...timonial-videos

This is the HTML I wrote (note: I don't know HTML as you can see).
<h2><span style="color: #cc0000;"><strong>TENS / EMS Units</strong> </span></h2>
<table border="0" width="200">
<tbody>
<tr>
<td>
<table width="200" border="0">
<tbody>
<tr>
<td><iframe src="https://www.youtube.com/embed/VF5zd7rK_UY" allowfullscreen="allowfullscreen"></iframe></td>
<td><iframe src="https://www.youtube.com/embed/w3bV_wKWg6M" allowfullscreen="allowfullscreen"></iframe></td>
</tr>
<tr>
<td><iframe src="https://www.youtube.com/embed/I_bEPMKSHTA" allowfullscreen="allowfullscreen"></iframe></td>
<td><iframe src="https://www.youtube.com/embed/u58Z5Z9l5A8" allowfullscreen="allowfullscreen"></iframe></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<h4><strong>NOTE: The videos that you see here are <span style="text-decoration: underline;">unsolicited</span>.</strong></h4>
<p><a href="https://massagetherapyconcepts.com/collections/tens-ems-units"><strong>See all the TENS Units Here</strong></a></p>

[Michael F]

The code that you provided seems to be working the same way:

display:table="" table-layout:fixed="" width:100=""

See the page now.
The the second code you gave me breaks up the videos as stacked (1 on top of the other) on the desktop.