const main =  document.getElementById('main');
        const scroller = document.getElementById('scroll');

        scroller.addEventListener('scroll', () => {
            main.scrollLeft = scroller.scrollTop;
        });

.container {
    display: flex;
    flex-direction: row;
}

.box{
    width: 400px;
    height: 600px;
    overflow-x: scroll;
    text-wrap: nowrap;
}

.box::-webkit-scrollbar{
    display: none;
}

.box-2{
    display: block;
    width: 50px;
    height: 600px;
    overflow-y: scroll;
}

.box-2 .content {
    height: 830px;
}

<div class="container">
        <div class="box" id="main">
            <div class="content">
                <p style="color: green;">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text.
                    Sample Text.</p>
                <p style="color: rgb(128, 55, 0);">Sample Text</p>
                <p style="color: rgb(25, 5, 78);">Sample Text</p>
                <p style="color: rgb(128, 0, 102);">Sample Text</p>
                <p style="color: green;">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text.
                    Sample Text.</p>
                <p style="color: rgb(128, 55, 0);">Sample Text</p>
                <p style="color: rgb(25, 5, 78);">Sample Text</p>
                <p style="color: rgb(128, 0, 102);">Sample Text</p>
            </div>
        </div>

        <div class="box-2" id="scroll">
            <div class="content"></div>
        </div>
    </div>