Flexbox 2 columns but spaced out as 3

Question

I am looking into a way

I have a main div and 2 other div's inside.

.main {
  display: flex;
  justify-content: space-between;
}

<div class="main">
  <div>Goes in the Middle</div>
  <div>Goes on the right</div>
</div>

What I need is the the space-between to space the 2 div's out as if it has 3 div's but only with 2.

How can I do this with flex without having 3 divs?

Answer 1

Just give the divs a width of 33.33333%:

.main {
  display: flex;
  justify-content: space-between;
}

.main>div {
  width: 33.3333%;
  /* below for test only */
  border: 1px solid red;
  box-sizing: border-box;
}

/* to push first div into middle - if you want it on left, remove this */
.main>div:first-child {
  margin-left:auto;
}

<div class="main">
  <div>Goes in the Middle</div>
  <div>Goes on the right</div>
</div>