CSS Flexbox space-between: Keep one element in center

I am making a music playback controller, and the container has 3 sections: left, center, and right. However, since the left and right sides have different widths, the center section isn't in the true center of the div, but I need it to be. I am using flexbox's space-between option to layout the items.

#container {
    display: flex;
    justify-content: space-between;
    background-color: lightgrey;
}

#container > div {
  height: 100px;
  border: 2px dashed red;
  
  /*This is only for looks*/
  text-align: center;
  padding: 5px;
}

<div id="container">
  <div>Left Side</div>
  <div>I want this centered</div>
  <div>Right Side (Extra text for extra length)</div>
</div>