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

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>