Float right using flex-grow spacer

Every now and again, there is a situation where I want to make an HTML element float to the right. I could use CSS float property; however its resulting behavior is sometimes counterintuitive and it requires something called "Clearfix hack".

As an alternative, I found it much more intuitive to use CSS Flexbox and a spacer element. All I need to do is:

• wrap all the items in a wrapper element that has CSS display: flex
• insert to the list a spacer element that has CSS flex-grow: 1

then that spacer will stretch out and push the subsequent elements to the right.

That's it.