javascript - Adding a floating div to a table row by click -

i have following table:

on click of circled blue icon there should opened "floating" div item on right side.

this div should responsive , aligned row.

i did defining floating div absolute , using fixed pixel dimension.

my problem if align floating div according relative location of row overhidden parent div. , if make absolute compared dom not responsive.

any suggestions of how divs structure should like?

please let me know if info missing?

edit:

here js-fiddle showing problem: https://jsfiddle.net/omriman12/3gv788o4/

i want red squere aligned row(try moving red squere right side of black box)

try this, might asking this.

  .main_wrapper{   width: 79%;   position:relative;   display: inline-block;   overflow: hidden; }  .a1{     width: 100%;     height: 50px;     background-color: black; }  .a2{     width: 100%;     height: 50px;     background-color: red;     position: fixed;     right: 0px;     top: 8px; }  .blue-wrapper {   width:20%;    background-color:blue;   display: inline-block;   height:50px; } 

(or)

.main_wrapper{   width: 100%;   position:relative;   display: inline-block;   overflow: hidden; }  .a1{     width: 100%;     height: 50px;     background-color: black; }  .a2{     width: 100%;     height: 50px;     background-color: red;     position: absolute;     left: 0px;     top: 8px;     z-index:9; }  .blue-wrapper {   width:20%;    background-color:blue;   display: inline-block;   height:50px;   position:absolute;   top:8px;   right:8px;   z-index:1; }