Customize collection banner in Shopify with image and words

[xihu]

Hi,

I am trying to create a collection banner with the format of a table, while there is an image on the left and on the right we can add in a heading and paragraph. But I had problems trying to make them aligned and have the right size. 

I would like to make a section like this - with the right size and layout

However, I have no idea how to adjust it with the code, and this is whats showing right now:

And this is the current code:

<table height="327" style="width: 101.365%;" data-mce-style="width: 101.365%;">
<tbody>
<tr>
<td style="width: 80%;" data-mce-style="width: 80%;"> <img data-mce-fragment="1" alt="" src="https://cdn.shopify.com/s/files/1/0560/5421/8775/files/Untitled_1240x1000px_480x480.png?v=1676350751" data-mce-src="https://cdn.shopify.com/s/files/1/0560/5421/8775/files/Untitled_1240x1000px_480x480.png?v=1676350751">
</td>
<td style="width: 11.7713%;" data-mce-style="width: 10%;"></td>
<td style="width: 36.2287%;" data-mce-style="width: 38%;">
<h3 style="text-align: center;" data-mce-style="text-align: center;">Men's Swim Shorts</h3>
<p style="text-align: center;" data-mce-style="text-align: center;"><span>Cool off this summer with Tuxx, your boys will love these adorable penguin swim trunks. Made with stretch fabric, soft internal mesh brief lining and pockets for self drain when getting out of the water. Use these versatile shorts on or off the beach.</span><span class="gmail-Apple-converted-space"> </span><span class="gmail-Apple-converted-space">Additional details include </span><span class="gmail-Apple-converted-space">Mosmann's signature sunglass zipper puller, </span><span>elasticated waistband with contrast colour drawcord. Designed in Australia. </span></p>
</td>
</tr>
</tbody>
</table>

Anyone can point me to the right direction of what I need to change to make it happen?

Thanks!!