title: Instagram web/desktop inspired search box
body: <p>If you visit someone's instagram page on desktop/pc, the search bar, when clicked, floats left and then text  can be entered to search. When there is no text in the search field, the search icon and the "search" placeholder go back to the original center position. </p>
  
  <p>I assume javacript/jquery is used to this and I want to implement it as well, but I don't know any script that will be able to accomplish this. Below is my HTML and CSS code, any help will be greatly appreciated! </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="box"&gt;
      &lt;div class="container-1"&gt;
      &lt;span class="icon"&gt;&lt;i class="fa fa-search"&gt;&lt;/i&gt;&lt;/span&gt;
      &lt;input type="search" id="search" placeholder="Search" /&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.box{
    margin: 3px auto;
  
    width: 200px;
    height: 20px;
    padding-right: 10px;
  }
  
  .container-1{
    width: 200px;
    vertical-align: middle;
    white-space: nowrap;
    position: relative;
  
  }
  
  .container-1 input#search{
    width: 200px;
    height: 30px;
    background: #FFFFFF;
    border: 1px solid #C5C4C4;
    font-size: 10pt;
    text-align: center;
    color: #000000;
  
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
     border-radius: 25px;
  
  
    -webkit-transition: background .55s ease;
    -moz-transition: background .55s ease;
    -ms-transition: background .55s ease;
    -o-transition: background .55s ease;
     transition: background .55s ease;
  }
  
  
  .container-1 input#search::-webkit-input-placeholder {
     color: #A8A7A7;
     letter-spacing: 1px;
     font-size: 12px;
  }
  
  .container-1 input#search:-moz-placeholder { /* Firefox 18- */
     color: #A8A7A7; 
     letter-spacing: 1px;
     font-size: 12px; 
  }
  
  .container-1 input#search::-moz-placeholder {  /* Firefox 19+ */
     color: #A8A7A7;
     letter-spacing: 1px;
     font-size: 12px;  
  }
  
  
  .container-1 input#search:-ms-input-placeholder {  
     color: #A8A7A7; 
     letter-spacing: 1px;
     font-size: 12px; 
  }
  
  input:focus::-webkit-input-placeholder { color:transparent; }
  input:focus:-moz-placeholder { color:transparent; } /* Firefox 18- */
  input:focus::-moz-placeholder { color:transparent; } /* Firefox 19+ */
  input:focus:-ms-input-placeholder { color:transparent; } /* oldIE ;) */
  
  
  .container-1 .icon{
    position: absolute;
    padding-top: 8px;
    padding-left: 50px;
    font-size: 12px;
    z-index: 1;
    color: #A8A7A7;
  
  }
  
  
  
  .container-1 input#search:hover, .container-1 input#search:focus, .container-1 input#search:active{
      outline:none;
      background: #ffffff;
  
    }
  
  
  
    input::-webkit-search-decoration,
  input::-webkit-search-cancel-button {
    display: none; 
  }
  
  
    @media all and (max-width : 370px) {
  
  
  .box{
    margin: 15px auto;
  
    width: 200px;
    height: 20px;
    padding-right: 10px;
  }
    }
  </code></pre>