How can I put one box next to another with flexbox?

Question

I'm trying to put two flex containers next to each other using flexbox, taking this layout as reference (I want it to be like the first row here, with part of the image on the left inside a box and the other one on the right)

This is my code so far for the two containers:

.chaco-container {
  border: $borde-textos;
  background-color: #bda89c;
  margin: 0;
  padding: 1em;
  width: 50%;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.plan-container {
  background-color: white;
  border: $borde-textos;
  width: 50%;
  display: inline-flex;
}

Answer 1

display: flex; needs to be applied on the parent container. Check out the below example snippet.

.flex-container {
  display: flex;
}

.chaco-container {
  width: 50%;
  background-color: yellow;
}

.plan-container {
  width: 50%;
  background-color: skyblue;
}

<div class="flex-container">
  <div class="chaco-container">...content</div>
  <div class="plan-container">...content</div>
</div>