How to place the cursor between two nodes that use user-select:all by clicking?

I have a div with contenteditable="true", and have two spans with contenteditble="false" and user-select: all.

Now, the cursor cannot be placed between these two spans by clicking.

But, if I change the user-select to ‘text’, it can behave correctly.

So, how to place the cursor between two nodes that use user-select:all by clicking?

Demo:
https://developer.mozilla.org/en-US/play?id=pToIaTfvo8adOT5tE7M22HX7GCiLb6yZ6R4cDSLaNQnMS%2B2BszfUm74s6OSu67faCW0ZKCPl8cn0eX9f