How to keep text and image div at the same height on different screen sizes?

Technical Q&A

Topic summary

Layout issue: two side-by-side divs (image and text) where the text’s height should not exceed the image, and both should remain vertically aligned and compact across screen sizes.

On larger or smaller displays, the elements shift and no longer share the same height/alignment. The button is intended to sit higher but also changes position with screen size variations.

Screenshots are central to understanding: one shows the desired alignment, another shows misalignment on different dimensions.

Key terms: “div” is an HTML container element; the problem arises in responsive layouts (designs that adapt to different screen sizes).

No solution, code, or settings were provided, and no actions or decisions were made. The request remains open, seeking guidance on keeping equal heights and consistent alignment across breakpoints.

Summarized with AI on February 7. AI used: gpt-5.
1

In my section I have a div with an image and I have a div of text next to each other. What I need to do is make sure that the text isn’t bigger in height than the image.

Also it should stay nice and compact together. But when I check on bigger screens, or even smaller, they start to move around and aren’t staying at the same height.

saidakl_0-1665066132898.png
saidakl_0-1665066132898.png1630×550 462 KB

Its somewhat supposed to stay like that, the button needs to be higher as well though.

But when I switch dimensions of my screen, it starts looking like this:

saidakl_1-1665066238309.png
saidakl_1-1665066238309.png1388×544 279 KB

Thanks in advance.