show close icon div on hover on text box
<p>I have text box. when I hover on it then close icon div should appear to the right side of the div.</p>

<p>I have tried this code. but somehow it didn't work.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.display_close{

}

.show_close_div{
  position: absolute;
  top:0px;
  right:0px;
  height:35px;
  display:none !important ;
  
}

.display_close:hover .show_close_div{
  display:block !important;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
&lt;input class="form-control display_close" type="text"&gt;
                                    &lt;span class="input-group-addon show_close_div"&gt;X&lt;/span&gt;</code></pre>
</div>
</div>
</p>

<p>Letter <strong>X</strong> should be center of <code>show_close_div</code>.</p>

<p>any help would be great.</p>

<p>thank you.</p>