CSS align few items on both side with flexbox

Question

I am trying to do few items on both side by using css flexbox but somehow I just can't stick them (div) side by side.

PS: I can't set number of elements because I want it to be flexible as in I can add in or remove and it won't affect my css.

I want it to be like this. Sample of picture:

I've tried this. But you can see from the output that there is gap between div on the left side.

.bottom{
  position:fixed;
  bottom:0;
}
.wrapper {
    width: 500px;
    border: solid 1px #000;
    display: flex;
    justify-content: flex-end;
}
.item-left {
    width: 20%;
    border: solid 1px #000;
    margin-right:auto;
}
.item-right {
    width: 20%;
    border: solid 1px #000;
    height: 200px;
}

<div id="bottom" class="bottom">
  <div class="wrapper">
    <a class="item item-left">
      <div class="item-label">Label</div>
    </a>
    <a class="item item-left">
      <div class="item-label">Label</div>
    </a>
    <a class="item item-right">
      <div class="item-label">Label</div>
    </a>
    <a class="item item-right">
      <div class="item-label">Label</div>
    </a>
  </div>
</div>

Here is the jsFiddle

Answer 1

One idea is to select the item-right element that's an adjacent sibling of item-left and add margin-left:auto.

See Adjacent sibling combinator.

/*
.bottom {
  position: fixed;
  bottom: 0;
}
*/

.wrapper {
  height: 100px;
  display: flex;
  border: solid 1px #000;
  background-color: lightblue;
}

.item {
  background-color: lightgreen;
  border: solid 2px #000;
  flex: 0 0 15%;
}

.item-left {
  border-color: red;
}
.item-right {
  border-color: purple;
}

.item-left + .item-right {
  margin-left: auto;
}

<div id="bottom" class="bottom">
  <div class="wrapper">
    <a class="item item-left">
      <div class="item-label">Left</div>
    </a>
    <a class="item item-left">
      <div class="item-label">Left</div>
    </a>
    <a class="item item-right">
      <div class="item-label">Right</div>
    </a>
    <a class="item item-right">
      <div class="item-label">Right</div>
    </a>
    <a class="item item-right">
      <div class="item-label">Right</div>
    </a>
  </div>
</div>