How to make/change sliding panel (css)?

Question

css

The main problem is positioning inside the div.
Making a sliding panel with css is not a problem.
But I can't change its properties for correct positioning inside the diva, while maintaining its correct operation (it travels as it should, where it is needed, at the right distance, etc.).
I have a page. I want to divide it vertically into equal parts (like table cells).
For example one part, two, three or four.
Like this

.DIV_graph_structure_two_graph
{
position: relative;
width:100vw;
height:50vh; /*  2 части=50vh, 3 части =33.3vh и т.д.  */
}

In each part, I want to place an outgoing slider. Right in the middle of this section.
Both the slider button and the sliding panel. All in the middle.
In the code below, I am forced to change the position from fixed to absolute for this centering.
Which will lead to incorrect operation of the slider (it travels too far, etc.)
And if you uncomment the lines, then the slider will work as it should, but there will be no positioning.
How to make/change sliding panel (css)? So that the slider works as it should and the position is correct?
https://jsfiddle.net/nue2c2bo/1/
All code

html,body 
{
padding: 0px;
margin: 0px;
font-family: Arial;
}

.graph_slider {
/*   position: fixed; */ position: absolute;
/*   top: 40px; */ top: 50%;
  left: 0;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.graph_slider_inner {
/* position: fixed; */ position: absolute;

/* top: 40px; */ top: 50%;

left: -250px;
width:250px;
  
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.graph_slider:hover {
  left: 250px;
}
.graph_slider:hover .graph_slider_inner {
  left: 0;
}


.graph_slider_settings
{
width:calc(100%-20px);
height:100px;
border: 1px solid black !important;
}

/* Ниже оформление */
/* Кнопка со стрелкой 1 - общая часть */
.ui_arrow_menu_button_1{
border: 0.0625rem solid #00AEFF; /* 1px */
background: #171B23;
cursor:pointer;
width:1.8rem;
padding: 0.4rem;
text-decoration: none;
transition-property: background;
transition-duration: 100ms;
transition-timing-function: ease;
transition-delay: 0s; 
vertical-align: middle;
}
.ui_arrow_menu_button_1:hover {
border: 0.0625rem solid #00AEFF; /* 1px */
background: #0E1015;
}

/* Кнопка со стрелкой - вправо */
.ui_arrow_right_menu_button_1_in {
background: #0C7ECB;
width:1.8rem;
height:1.9rem;
content:'';
clip-path: polygon(0 34%, 50% 80%, 100% 34%, 80% 34%, 50% 60%, 20% 34%);
transform:  rotate(-90deg);
}

/* Панель 1 */
.ui_panel_1
{
padding: 10px;
background: #222A37;
border: 1px solid #383838;
color:#CDCFD2;
font-family: Arial;
font-size: .875rem;
vertical-align: middle;
}

Well, html code

<div class="DIV_graph_structure_two_graph">
<div class="graph_slider">
<div class="ui_arrow_menu_button_1"><div class="ui_arrow_right_menu_button_1_in"></div></div>
<div class="graph_slider_inner">
<div class="ui_panel_1 graph_slider_settings">
Some text
</div>
</div>
</div>
</div>




<div class="DIV_graph_structure_two_graph">
<div class="graph_slider">
<div class="ui_arrow_menu_button_1"><div class="ui_arrow_right_menu_button_1_in"></div></div>
<div class="graph_slider_inner">
<div class="ui_panel_1 graph_slider_settings">
Some text
</div>
</div>
</div>
</div>