Image Div next to Text Div + Responisve - html

Question

So I'm trying to create a template where one div is a picture and another one is a text with background. Now i want to make this template responsive, so that the text is going beneath the picture at a certain px width. Looking through stackoverflow i have seen countless posts that say you should use a flexbox. I tried, but i cant get it quite right.
So on Desktop it should look like this: https://imgur.com/a/XfJDwKL and on a Smartphone it should jump over here https://imgur.com/a/8KaKJxF
I need to have the margin to the sides, at least on the desktop version. Now my problem is, that my picture is having no limitations on my site and is getting too big, that an automatic switch to rows is happening(as i understand it).
My code is here : https://jsfiddle.net/wqesp83a/
.container {
display: inline-flex;
border: 1px solid black;
margin: 5%;
width: 90%;
}
.flex-direction {
flex-direction: row;
}
.div1 {
display: flex;
border-right: 1px solid black;
}
h {
color: #90bd49;
font-size: 30px;
}
p {
color: #333333;
font-size: 16px;
}
.div2 {
display: flex;
background-color: #fff;
max-width: 50%;
padding: 1%;
background-color: #e3e3e3;
}
span {
font-size: 16px;
text-align: left;
}
#media only screen and (min-width: 0px) and (max-width: 500px) {
.flex-direction {
flex-direction: column;
}
.div1 {
max-width: 100%;
border-right: none;
border-bottom: 1px solid black;
}
.div2 {
max-width: 100%;
}
.container {
margin: 0%;
}
<div class="container flex-direction">
<div class="div1"><span><img alt="Fotoabzüge" src="https://s3.eu-central-1.amazonaws.com//pbx-sw-profotolab/media/79/95/4c/1673964627/bild4_(1).jpg" width="100%" height="100%" /></span></div>
<div class="div2"><span><h>Lorem ipsum</h> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.</p> </span></div>
</div>
I tried to limit the width and height of the divs and the picture but either it doesnt help or im breaking the whole thing even more. If someone could help me see my mistakes here, i would be very thankful.

Answer 1

grid to the rescue:
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr))
will create a grid column for each child of the container, as long as they can stretch to 400px width. When there's not enough space for the grid items to be 400px in width, they will wrap into a single column. Just swap the px value to whatever you want.
grid-auto-rows: 1fr will let the two columns have equal height.
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
grid-auto-rows: 1fr;
border: 1px solid black;
margin: 5%;
width: 90%;
}
.flex-direction {
flex-direction: row;
}
.div1 {
display: flex;
border-right: 1px solid black;
}
h {
color: #90bd49;
font-size: 30px;
}
p {
color: #333333;
font-size: 16px;
}
.div2 {
display: flex;
background-color: #fff;
/* max-width: 50%; */
padding: 1%;
background-color: #e3e3e3;
}
span {
font-size: 16px;
text-align: left;
}
#media only screen and (min-width: 0px) and (max-width: 500px) {
.flex-direction {
flex-direction: column;
}
.div1 {
max-width: 100%;
border-right: none;
border-bottom: 1px solid black;
}
.div2 {
max-width: 100%;
}
.container {
margin: 0%;
}
<div class="container flex-direction">
<div class="div1"><span><img alt="Fotoabzüge" src="https://s3.eu-central-1.amazonaws.com//pbx-sw-profotolab/media/79/95/4c/1673964627/bild4_(1).jpg" width="100%" height="100%" /></span></div>
<div class="div2"><span><h>Lorem ipsum</h> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.</p> </span></div>
</div>