Three columns, mid column with absolute icon - css

Question

I have done three columns with a mid column with an absolute icon on the side but the problem happens when you show it in the mobile or the screen is different that mine. If you resize screen the icon moves to the left.
The problem is that I used a position absolute for the icon, Is there no other way to do it?
I want to obtain this:
Codepen Code
table{
text-align:center;
margin-top:20px;
}
td{
padding: 20px;
}
#midCol{
background:lightblue;
width:90px;
}
#iconArrow{
color:red;
font-size:100px;
position: absolute;
top:140px;
right:985px;
}
.col1{
background:ghostwhite;
width:400px;
}
.col2{
background:ghostwhite;
width:400px;
}
<div class="container">
<div class="row">
<table border=0>
<tr>
<td class="col1">WORD</td>
<td id="midCol" rowspan="6">
<h2 >C</br>R</br>E</br>A</br>T<span id="iconArrow" class="glyphicon glyphicon-triangle-right"></span></br>I</br>N</br>G</h2>
</td>
<td class="col2">SENTENCE</td>
</tr>
<tr>
<td class="col1">WORD</td>
<td class="col2">SENTENCE</td>
</tr>
<tr>
<td class="col1">WORD</td>
<td class="col2">SENTENCE</td>
</tr>
<tr>
<td class="col1">WORD</td>
<td class="col2">SENTENCE</td>
</tr>
<tr>
<td class="col1">WORD</td>
<td class="col2">SENTENCE</td>
</tr>
<tr>
<td class="col1">WORD</td>
<td class="col2">SENTENCE</td>
</tr>
</table>
</div>
</div>

Answer 1

Instead of setting the left or right attribute on the absolute-positioned element, use auto to centre it, and then left/right margin to nudge it along.
E.g. these settings look about right:
#iconArrow {
right: auto;
margin-left: 6px;
/* other attributes */
}