scrollbar hidden behind div image

I'm trying to have two div boxes that are scrollable for long content. However, the scrollbar for the box on the left seems to be hidden behind my background image div and I can't figure out a way to have it show. Even dev tools is showing the scrollbar IS there but I have exhausted all I can think of. Looking for a some help on this.

  .left {
width:50%;
overflow-y: scroll;
order:1;
z-index:1;

}

full code below

https://codepen.io/Woj56k/pen/RNwLBwm

You just have to move <div class="bg"></div> outside the .left to prevent it from covering the scrollbar.
Like this

   <!-- Background (Moved outside layout) -->
    <div class="bg"></div>

    <!-- Main Layout -->
    <div class="layout">
        <div class="left">
            <p style="font-size:36px;">
....

additionally you can do following things:

1. Set .bg to z-index: -10 so it stays in the background.
2. Add position: relative; z-index: 1; to .left and .right so they are above .bg.
3. Ensure .layout fills the full height for proper scrolling.

.layout {
            display: flex;
            height: 100vh;
            width: 100vw;
        }