justify-content space-between not aligning elements left and right - html

Question

Alright, so I am trying to use Flexbox to align my form on the left hand side of the screen and my image on the right hand of the screen using justify-content: space-between but when I put that on my .container it doesn't work. Here is what I have so far:
<form>
<div class="heading">
<h1 class="callout">Send Us A Message!</h1>
</div>
<div class="container">
<div class="form-group">
<label>First Name</label>
<input type="text" class="form-control" name="firstname">
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" class="form-control" name="lastname">
</div>
<div class="form-group">
<label>Phone Number</label>
<input type="text" class="form-control" name="phonenumber">
</div>
<div class="form-group">
<label>Email Address</label>
<input type="email" class="form-control" name="email">
</div>
<div class="form-group">
<label>Message</label>
<textarea name="message" cols="30" rows="10">
</textarea>
<button class="btn-1">Send</button>
</div>
<div class="image">
<img src="img/city.jpg" alt="">
</div>
</div>
</form>
My style:
.container {
display: flex;
justify-content: space-between;
flex-direction: column;
}
img {
width: 20%;
}

Answer 1

Put the two sections in their own containers, then it can work.
.container {
display: flex;
justify-content: space-between;
}
section:first-child {
background-color: orange;
}
section:last-child {
background-color: lightgreen;
}
.image {
border: 2px dashed black;
height: 100px;
width: 100px;
}
<form>
<div class="heading">
<h1 class="callout">Send Us A Message!</h1>
</div>
<div class="container">
<section><!-- container one -->
<div class="form-group">
<label>First Name</label>
<input type="text" class="form-control" name="firstname">
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" class="form-control" name="lastname">
</div>
<div class="form-group">
<label>Phone Number</label>
<input type="text" class="form-control" name="phonenumber">
</div>
<div class="form-group">
<label>Email Address</label>
<input type="email" class="form-control" name="email">
</div>
<div class="form-group">
<label>Message</label>
<textarea name="message" cols="30" rows="10">
</textarea>
<button class="btn-1">Send</button>
</div>
</section>
<section><!-- container two -->
<div class="image"> image
<img src="img/city.jpg" alt="">
</div>
</section>
</div>
</form>