Place image next to div with flexbox

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

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>

Answer 2

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