title: show close icon div on hover on text box
body: <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>