Overflow problem with blank div inside another div

I want to make a slider between two sides of my website so users can adjust the sizes of the two sides. I want the slider to be like a narrow line with a "bubble" in the center for it to be easily draggable, but the bubble won't overflow the line, because it is div inside the div

my code looks like

main {
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

main #separator {
    height: 100%;
    width: 3px;
    background-color: grey;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: e-resize;
    overflow: visible;
}

#separator #separator-bubble {
    width: 40px;
    height: 10px;
    border-radius: 5px;
    background-color: grey;
    z-index: 1000;
}

<main>
    <div id="separator"><div id="separator-bubble"></div></div>
</main>

I tried overflow: visible; and that stuff but nothing helped

Use absolute positioning

#separator #separator-bubble {
    position: absolute; /* Add this line */
    width: 40px;
    height: 10px;
    border-radius: 5px;
    background-color: grey;
    z-index: 1000;
}