Place image next to div with flexbox - html

Question

I have this image and this box I'm trying to put on the same line. The box is just going to be holding a header and some text, but I can't seem to get them on the same line. I'm using flexbox and I did some research into this, but can't quite work it out. Here's the code:
#container {
min-height: 95vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.box {
height: 400px;
width: 600px;
background-color: #f5f2ed;
text-align: justify;
padding: 20px;
}
img {
width: auto;
height: 400px;
border-radius: 16px;
}
<div id="container">
<div class="main">
<img src="/">
<div class="box">
<h2>hello</h2>
<p>paragraph here...</p>
</div>
</div>
</div>
I made two divs inside the container because the image is going to be outside the box with the text.

Answer 1

Maybe display: flex; in .main{} can fix the problem.

Answer 2

You should add display:flex property to main element and flex :1 property to both child elements of main element
#container {
min-height: 95vh;
}
.main {
display : flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.box {
height: 400px;
width: 50%;
flex : 1;
background-color: #f5f2ed;
text-align: justify;
padding: 20px;
}
img {
width: auto;
height: 400px;
flex : 1;
border-radius: 16px;
}
<div id="container">
<div class="main">
<div class="pic-div">
<img src="/">
</div>
<div class="box">
<h2>hello</h2>
<p>paragraph here...</p>
</div>
</div>
</div>