Range selector position overlaps axes

I am using Plotly.js for my project and i need to place the X-Axis on top and also display a range selector .

The functionality works fine but the X-Axis title and range selector are overlapping with X-Axis ticks.

Code pen link : https://codepen.io/manozz91/pen/XWmvVzJ

How shall i solve this ?