If you want to wrap text around images, you need to float the image responsively.
Don’t use a table as it makes no sense from a semantic standpoint. Tables should not be used for layout purposes. They should only be used for columnizing data.
The theme you are using is leveraging a responsive imaging technique of a img srcset as described in the link above. All you need to do is float the image to the left within a paragraph tag like this:
<style>
.float-left {
float: left;
margin: 1em 1em 1em 0;
}
</style>
<p>Text text text text text text text text text.
<img class="float-left"
src="https://leighross.online/wp/wp-content/uploads/2016/08/me-300x300.jpg"
alt="Leigh Ross"
srcset="https://leighross.online/wp/wp-content/uploads/2016/08/me-150x150.jpg 150w,
https://leighross.online/wp/wp-content/uploads/2016/08/me-300x300.jpg 300w"
sizes="(max-width: 399px) 150px,
(min-width: 400px) 300px"/>
Text text text text text text text.
</p>
Notice that the img tag is WITHIN a paragraph tag and treated as an inline object to the text itself. No width and height is explicitly stated. No alignment is explicitly needed (because its floated left).
You let the browser choose the best size based upon 2 widths that are part of the image set (150w, and 300w) and the size rules. If the width is under 399 pixels, use the 150×150 pixel image. If the width is greater than 400 pixels, use the 300×300 pixel image. The widths are intentionally made less than the width of the image so that the text can be accommodated.
I know this may be a little complicated, but once when you study it carefully and see it in action, you will get it. You will want to use this technique in all your posts where you place pictures.
