How to position 2 items center and 1 to the right with flexbox?

Question

How do I position 2 items center and 1 to the right with flexbox.

I've managed to do it like this, but its not quite in the center and I don't want to use an empty div.

Open for css-grid solutions as well.

body {
  margin: 0
}

.top-bar-wrapper {
  height: 30px;
  background-color: black;
  color: white;
}

.top-bar {
  display: flex;
  max-width: 1080px;
  margin: 0 auto;
  justify-content: space-between;
  padding: 5px;
}

<div class="top-bar-wrapper">
  <div class="top-bar">
    <div></div>
    <div class="top-bar-center">
      <span class="item">
                    Free Shipping
                </span>
      <span class="item">Free 30 day returns</span>
    </div>
    <span class="search-icon">Search</span>
  </div>
</div>

Answer 1

An easy workaround is to make the right div width:0 and keep overflow then center the middle one with margin:auto:

body {
  margin: 0
}

.top-bar-wrapper {
  height: 30px;
  background-color: black;
  color: white;
}

.top-bar {
  display: flex;
  max-width: 1080px;
  margin: 0 auto;
  padding: 5px;
}
.top-bar-center {
  margin:auto;
}
.top-bar > span:last-child {
  min-width:0;
  width:0;
  display:inline-flex;
  justify-content:flex-end;
}

<div class="top-bar-wrapper">
  <div class="top-bar">
    <div class="top-bar-center">
      <span class="item">
                    Free Shipping
                </span>
      <span class="item">Free 30 day returns</span>
    </div>
    <span class="search-icon">Search</span>
  </div>
</div>