Can I use CSS tables to place an image and text side-by-side, without knowing the image width in advance? - css-tables

Question

I want to have a vertical stack of blocks; each block has an image on the left and text (heading and paragraphs) on the right.
I would like the image to be its natural width and the text to use the remaining width in the parent element.
This is similar to a table, but the images in different blocks have different widths. So the first "column" in the table is not of constant width.
Floating the image left does not work, because if the text has a greater height than the image, the text wraps underneath the image.
CSS tables don't seem to work, because the CSS does not know the differing image widths from block to block.
My "block" element CSS includes 'display: table-row;'. My image element and my text element CSS include 'display: table-cell;'. The result is that some images are their natural sizes; others are smaller than their natural sizes.
This seems to be related to the amount of text: one line of text gets a natural size image; two lines squeezes the image a few pixels; 15 lines squeezes the image to about one-half size.
I would welcome suggestions for how to accomplish my goal.

Answer 1

I think that can be resolved by display flex. Documentation W3C: https://www.w3schools.com/css/css3_flexbox.asp
Try this:
HTML
<div class="row" style="width: 100%">
<img src="https://image.shutterstock.com/image-photo/salesman-offering-cheese-samples-customers-600w-414153787.jpg"/>
<div>
<h2>Head</h2>
<p>
Suspendisse eu scelerisque odio. Quisque hendrerit malesuada risus ut imperdiet. Nulla facilisi. Aenean bibendum risus et mi rutrum convallis. Phasellus ornare orci leo, eget faucibus tortor egestas at. Aliquam iaculis, metus dignissim vulputate dignissim, est metus condimentum nulla, at maximus neque tellus non erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor, magna ut lacinia blandit, est ligula sagittis nulla, nec interdum erat velit sit amet velit. Sed ut ante at enim accumsan ultricies porta quis neque. Vestibulum volutpat ipsum eget libero malesuada volutpat. Praesent sed porta tellus. Praesent ac volutpat justo.
</p>
</div>
</div>
<div class="row" style="width: 70%">
<img src="https://image.shutterstock.com/image-photo/salesman-holding-cutting-board-assorted-260nw-407934532.jpg"/>
<div>
<h2>Head</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse luctus massa nec fermentum egestas. Sed feugiat, nisl vitae dictum accumsan, felis odio elementum eros, imperdiet faucibus mi nisi convallis dolor. Mauris interdum maximus neque, in convallis erat facilisis porttitor. Sed ac tortor imperdiet, efficitur nisi nec, efficitur massa. Integer consectetur nec nunc ac porta. Proin non ultricies lorem, rhoncus laoreet ligula. Donec condimentum mauris id urna placerat dapibus. Cras consequat, quam vitae semper luctus, mi tortor finibus augue, sed vestibulum odio lorem at tellus. Fusce eu urna eget ante mollis vestibulum. Nullam ante eros, convallis vitae hendrerit at, volutpat id dui.
</p>
</div>
</div>
<div class="row" style="width: 80%">
<img src="https://image.shutterstock.com/image-photo/salesman-offering-cheese-samples-customers-600w-414153787.jpg"/>
<div>
<h2>Head</h2>
<p>
Suspendisse eu scelerisque odio. Quisque hendrerit malesuada risus ut imperdiet. Nulla facilisi. Aenean bibendum risus et mi rutrum convallis. Phasellus ornare orci leo, eget faucibus tortor egestas at. Aliquam iaculis, metus dignissim vulputate dignissim, est metus condimentum nulla, at maximus neque tellus non erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor, magna ut lacinia blandit, est ligula sagittis nulla, nec interdum erat velit sit amet velit. Sed ut ante at enim accumsan ultricies porta quis neque. Vestibulum volutpat ipsum eget libero malesuada volutpat. Praesent sed porta tellus. Praesent ac volutpat justo.
</p>
</div>
</div>
CSS:
.row {
display: flex;
}
.row img {
flex-grow: 1;
height: max-content;
}
.row div {
margin-left: 10px;
}
https://jsfiddle.net/ymuxdtg6/