How to create 3-column flexbox container with 1 column always center?

Question

I create something like this:

The challenge is to center blue column horizontally regardless of the content in the side columns.

Now it turns out like this:

But I want it to be this way:

How to do it?

.table {
  width: 100%;
}

.item {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 5px
}

.center-box {
  flex-basis: 70px;
  background: blue;
  text-align: center;
  color: white;
}

.side-box {
  flex-grow: 1;
  background: red;
  text-align: center;
  color: white;
}

<div class="table">
  <div class="item">
    <div class="side-box left">text</div>
    <div class="center-box">center</div>
    <div class="side-box right">text</div>
  </div>
  <div class="item">
    <div class="side-box left">long text</div>
    <div class="center-box">center</div>
    <div class="side-box right">text</div>
  </div>
  <div class="item">
    <div class="side-box left">text</div>
    <div class="center-box">center</div>
    <div class="side-box right">long text</div>
  </div>
</div>