CSS align few items on both side with flexbox [duplicate]

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>