Intercepting image and text in CSS/HTML - html

Question

I'm trying to prevent an image and text from overlapping with each other in html. Currently this is what I have:
But when the screen size gets smaller, the text and image intercept. I'm looking to make it so the text conform to the boarders of the image. This is what's happening now:
Lastly, this is my CSS
.image {
width: 500px;
margin-left: auto;
display: block;
padding-top: 10%;
padding-right: 10%;
}
.text {
font-size: 22px;
padding-top: 10%;
max-width: 700px;
position: absolute;
}

Answer 1

Your issue is with absolute positioning. Whenever you use position:absolute you remove that element from the source flow. You can try to remove the absolute positioning and then try something like the following:
Codepen example
<div class="parent">
<div class="text">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the 1960s with
the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem
Ipsum.
</p>
</div>
<div class="image">
Place your image here.
</div>
And CSS:
.parent {
display: flex;
max-width: 1000px;
margin: 0 auto;
}
.text, .image {
padding: 15px;
}
.image {
width: 500px;
}
.text {
width: calc(100% - 500px);
}