Сделать DIV частью изображения или как разместить два элемента рядом друг с другом и автоматически расположить их друг над другом

Я пытаюсь создать div, который является частью изображения. Он будет автоматически перемещаться, если изображение будет перемещено (например, размер браузера стал меньше, и изображение будет перемещаться. Div будет следовать за изображением). Однако я понятия не имею, как это сделать. Я попробовал следующий метод:

<div class="wrapper">
    <img src="2.jpg">
    <img src="1.jpg">
    <div class="play1" style="position:absolute; top:100px; left:100px">Content</div>
</div>

Примечание. Оболочка имеет "относительный" стиль позиции

Я подумал: если это невозможно, я могу создать два div с изображением в качестве фона. Таким образом, у каждого изображения есть собственный div. Но как бы разместить эти два div рядом с eachother и сделать их "разделенными", если браузер станет меньше. Я знаю, как разместить два div друг рядом друг с другом, но как бы я сделал возможным, если, если браузер станет меньше, второе изображение будет двигаться ниже первого изображения.

p/s Для избирателей вне темы: у меня нет второго кода для моего второго вопроса, потому что я просто понятия не имею, как это сделать. Я мог бы вставить кусок кода, где два divs находятся рядом друг с другом, но все.