Как сделать/изменить выезжающую панель (css)?

Question

Евгений Иванов @logpol32

Как сделать/изменить выезжающую панель (css)?

Основная проблема в позиционировании внутри дива.
Сделать выезжающую панель на css не проблема.
Но изменить её свойства, для правильного позиционирования внутри дива, при этом сохранив правильную её работу (выезжает как надо, куда надо, на нужное расстояние и т.д.) у меня не удается.

У меня есть страница. Я хочу делить её по вертикали на равные части (как ячейки таблицы).
Например одна часть, две, три или четыре.
Вот так

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

В каждой части я хочу размещать выезжающий слайдер. Ровно по середине этой части.
Как кнопку слайдера, так и выезжающую панель. Все по середине.
В коде ниже я вынужден изменить позицию с fixed на absolute для такого центрирования.
Что и приведет к некорректной работе слайдера (выезжает слишком далеко и т.д.)
А если раскомментировать строки - то слайдер заработает как надо, но вот позиционирования не будет.
Как сделать/изменить выезжающую панель (css)? Чтобы и слайдер работал как надо и позиция была верная?

https://jsfiddle.net/nue2c2bo/1/

Весь код

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;
}

Ну и html код

<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>