Positionner une image sur l'image, à droite du texte (lors du hover)

Bonjour, Je n'arrive pas à placer l'icône sur la droite de l'image, elle reste actuellement sur la droite en dehors de l'image. J'ai fait un tableau car je n'ai pas réussi à appliquer un float: right;
J'ai mis en pièce jointe une image du résultat à atteindre.

Voici mon code :

.text-wrapper:hover {
background: rgb(112, 88, 42);
opacity: 0.8;
font-weight: bold;
font-size: 12px;
text-align: left;
vertical-align: middle;
}

.image-cell:hover {
text-align: left;
}
<a class="gallery-item" href="#"><img src="../images/04.jpg" alt="paper" style="width:20%"><span class="text-wrapper">
<span class="name">

<table>
<tr>
<td class="portfolio-cell">
<div class="value">portfolio text</div>
</td>
<td class="image-cell">
<i class="fa fa-eye fa-lg"></i>
</td>
</tr>
<tr>
<div class="">text2</div>
</tr>
</table>

Merci pour votre aide.

Bonjour bouggy,

Attention ton code html n'est pas bon, il manque des balises et des balises fermentes

Je t'ai fait un exemple plus "w3c" sans les tableaux : https://codepen.io/Zonecss/pen/LdgpPY