Problem description

An <img> element and a <p> element are placed adjacent in the document flow. The task is to align the bottom of the first line of text with the bottom of the image, achieving baseline alignment.

Goal

Flush-align the image bottom with the text baseline of the paragraph.

Constraints

Only CSS on existing tags is permitted; you cannot wrap elements or use JavaScript.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.