Essentially, I encountered an issue where I had a table row with 2 cells - the left cell containing text and the right one containing an image. As the screen size decreased, I needed the image to move below the text. After some investigation, I delved into the workings of the display and flex properties to address this problem.
In the table row properties, I included
display: flex;
flex-wrap: wrap;
and for each cell, I added flex: 1 1 10ch;, as demonstrated on this resource, providing a clear explanation.
Now, my aim is for the image to shrink when it moves below the text as the screen size decreases. The fixed size of the image does not adjust proportionally with percentages or using max-width. Additionally, I attempted vertical alignment but noticed no change.
<div>
<table style="width: 100%;">
<tbody>
<tr style="display: flex; flex-wrap: wrap;">
<td style="text-align: left; vertical-align: middle; padding: 0 3% 0 0; flex: 3 1 50ch;">
<p>Some random text. Typically, there's more content here.</p>
</td>
<td align="justify" style="padding: 0.5%; flex: 1 1 10ch;"><img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" width="500" /></td>
</tr>
</tbody>
</table>
</div>I'm also struggling with the vertical alignment of the text. Is there a method to reposition it to the center?