How to set two flexbox containers next to each other

Question

I'm trying to put a flexbox container next to each other, so that they would be side by side, like this:

Here is what I have so far:

.container {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  justify-content: flex-start;
  border: 3px dashed black;
  width: 750px;
  height: 750px;
}

.container1 {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  justify-content: flex-start;
  border: 3px dashed black;
  width: 1500px;
  height: 50px;
}

.container2 {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  justify-content: flex-start;
  border: 3px dashed black;
  width: 750px;
  height: 750px;
}

<div class="container1"></div>
<div class="container"></div>
<div class="container2"></div>

Answer 1

You need to add an outer container and then add display flex and the flex row

See here:

https://codepen.io/lasercake/pen/yrwNVx

  <div class="container1"></div>
     <div class="outer-container">
       <div class="container"></div>
       <div class="container2"></div>
    </div>

And the css will need updating to:

   .container { 
      border: 3px dashed black; 
      width: 750px; 
      height: 750px;
   }
  .outer-container{
      display: flex;  
      flex-direction: row;
  }

  .container2 {
      border: 3px dashed black; 
      width: 750px; 
      height: 750px;
  }

This is because flexbox is more about the containing element rather than the individual elements. In this case the outer-container is formatting the child elements to display equally in a row.

Edit: This is a great site to use a flexbox reference: https://css-tricks.com/snippets/css/a-guide-to-flexbox/