React.js Horizontal Sticky Headers on a container when scroll

Would like to create a behaviour similar to https://codepen.io/chrissp26/pen/dFljB?editors=0010 using react

Child elements are positioned absolutely. Once unstuck should return back to absolute position (in the visible view port) with the coordinates before being sticky.

The requirement is challenging than what it is seems to be, because of the specificity of absolute positioning and mark up restriction.

Attached is a sample and a partial implementation of the requirement. Please refer to the code pen behaviour and the attached implementation prior to submitting any proposal and raise any questions or concerns in the propsal.