Flexbox - 水平对齐 - 中间的第一个项目，第二个 - 左对齐

Question

ul { 
  padding: 0; 
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
li {
  display: flex;
  margin: 1px;
  padding: 5px;
  background: #aaa;
}
li:last-child {
  background: #ddd;
  
}

<ul>
<li>must always be in the center & occupy width of its text</li>
<li>text must start where 1'st item's text ends</li>
</ul>

我需要第一个项目始终位于中间并仅占据其文本的宽度;第二项的文本必须准确地从第一项的文本结束的位置开始。

https://jsfiddle.net/xa4yfbvb/