css - how to make flex-item width based on its text width instead of the flex-container width

Question

The blue area is flex-container, while the red area is flex-item.

However I want the flex-item size is based on its content width instead of the container width like below purple area:

CodeSandbox
https://codesandbox.io/s/silly-aryabhata-5fgsh?file=/src/App.js