title: Custom placeholder in input with icon
body: <p>I am trying to make a custom placeholder for my "Search" input. It should look like a search icon (using Bootstrap <code>glyphicon glyphicon-search</code> classes for that) and then the word "Search", inside the input element, just as a placeholder looks like, and centered.</p>
  
  <p>I am trying to position the <code>div</code> containing these to elements inside the input but I can't get it right.</p>
  
  <p>Here's the code in <a href="https://jsfiddle.net/83x8tfwp/" rel="nofollow">jsfiddle</a>.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="search-wrapper"&gt;
      &lt;form class="post_search" id="post_search" action="/posts/explore" accept-charset="UTF-8" method="get"&gt;&lt;input name="utf8" type="hidden" value="✓"&gt;
          &lt;input autocomplete="off" class="search-input" type="search" name="q[caption_or_user_user_name_cont]" id="q_caption_or_user_user_name_cont"&gt;
          &lt;div class="placeholder"&gt;
              &lt;div&gt;
                  &lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;
                  &lt;span&gt;Search&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.search-wrapper {
    max-width: 340px;
    margin: 0 auto;
    text-align: center;
    margin-top: 20px;
    display: inline;
  }
  
  .search-wrapper .search-input {
    border: 1px solid #ddd;
    border-radius: 15px;
    background-color: #eee;
    width: 220px;
    height: 31px;
    padding: 10px 15px;
    transition: 0.25s all;
  }
  
  .search-wrapper .search-input:focus {
    outline: 0 none;
    background-color: #fff;
    transition: 0.25s all;
  }
  
  .search-wrapper .placeholder {
    display: inline;
    position: relative;
    top: 30%;
    width: 40px;
    margin: 0 auto;
    text-align: center;
    font-size: 10px;
  }
  </code></pre>
  
  <p>Then when focusing on the input the placeholder should be gone, I guess this shouldn't be difficult with some js.</p>
  
  <p>But back to the issue, what am I doing wrong? How can I display the placeholder as intented?</p>