How can I make text in my td wrap when it reaches the width of the image in my td?

Question

So I have <td> in my table that looks like this:

<tr> 
    <td>
        <p class="tableText">Random text that goes on REALLY long..........</p>
        <img src="www.imageurl.com/img.png" width="33vw">
    </td>
    <td>
        <p class="tableText">Random text that goes on REALLY long..........</p>
        <img src="www.imageurl.com/img.png" width="33vw">
    </td>
</tr>

What I want to be able to do, is the width of each <td> is the width of the image, then the text should wrap when it reaches the width of the image to the next line. However, instead the text is just running on.

Is there something I can do in JS/JQuery,HTML, or CSS to fix this? (preferably html/css)

Answer 1

just give the same width in pas you are giving to the img because they are siblings.

td {
  border: red solid
}
img {
  display: block;
  width: 33vw
}
p {
  width: 33vw
}

<table>
  <tr>
    <td>
      <p class="tableText">Random text that goes on REALLY long..........</p>
      <img src="//dummyimage.com/100x100" />
    </td>
    <td>
      <p class="tableText">Random text that goes on REALLY long..........</p>
      <img src="//dummyimage.com/100x100" />
    </td>
  </tr>
</table>