I am currently working on a a div element which I want to be scrollable along the x-axis. I want to use plain CSS and JavaScript.
I have achieved the scroll behavior along x-axis using these properties.

body {
    height: 100vh;
    min-width: 100vw;
    overflow: hidden;
    overflow-x: scroll;
}

.main {
    height: 100vh;
    min-width: 100vw;
    /* Do not allow user to select */
    user-select: none;
    display: flex;
    align-items: center;
}

.para {    
    /* typpography */
    font-family: 'Courier New', Courier, monospace;
    font-size: 13rem;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: -5px -5px 2px black, 5px 5px 2px black;
    letter-spacing: 0.2em;
    cursor: grab;
}

I tried following this answer Horizontal Scroll Without Holding Shift but nothing seems to work. This the code-pen for the same. hori_scrolling.
For the sake of not breaking the code once again, I want to make the <div> element to have a scrollbar like behavior in future.