Пространство justify-content-между несоосными элементами слева и справа

Question

Хорошо, поэтому я пытаюсь использовать Flexbox для выравнивания моей формы с левой стороны экрана и моего изображения с правой стороны экрана, используя justify-content: space-between, но когда я помещаю это на мой .container, это нене работаетВот что у меня есть:

<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>

Мой стиль:

.container {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

img {
  width: 20%;
}

Answer 1

Поместите две секции в свои собственные контейнеры, чтобы они могли работать.

.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>