✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

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 ?