Flex：在没有最大宽度的情况下并排对齐两个项目

.items {
  text-align: right;
}

.item {
  display: inline;
  margin-right: -4px;        /*  take out inline element space  */
}

.item div {
  display: inline-block;
  background: #e0ddd5;
  color: #171e42;
  padding: 10px;
}

.item:nth-child(even) div {
  background-color: darkgrey;
}

.item:nth-child(even)::after {
  content: '\A';
  white-space: pre;
}

<div class="items">
  <div class="item"><div> Item 1 with text </div></div>
  <div class="item"><div> Item 2 with more text </div></div>
  <div class="item"><div> Item 3 with some text </div></div>
  <div class="item"><div> Item 4 without text </div></div>
  <div class="item"><div> Item 5 lorem </div></div>
  <div class="item"><div> Item 6 ipsum </div></div>
  <div class="item"><div> Item 7 with lorem </div></div>
  <div class="item"><div> Item 8 with ipsum </div></div>
</div>