想让搜索栏浮动到左侧

Question

想让搜索栏浮动到左侧，图标在右侧，当它浮动到css属性以下时，不应该打扰。

#search_bar .container-2 {
  vertical-align: middle;
  white-space: nowrap;
  position: absolute;
}

#search_bar .container-2 input#search {
  width: 52px;
  height: 50px;
  background: #2b303b;
  border: none;
  font-size: 10pt;
  font-weight: 700;
  position: absolute;
  color: #aac500;
  margin-top: -13px;
  padding-left: 45px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-transition: width .55s ease;
  -moz-transition: width .55s ease;
  -ms-transition: width .55s ease;
  -o-transition: width .55s ease;
  transition: width .55s ease;
}

#search_bar .container-2 input#search::-webkit-input-placeholder {
  color: #65737e;
}

#search_bar .container-2 input#search:-moz-placeholder {
  /* Firefox 18- */
  color: #65737e;
}

#search_bar .container-2 input#search::-moz-placeholder {
  /* Firefox 19+ */
  color: #65737e;
}

#search_bar .container-2 input#search:-ms-input-placeholder {
  color: #65737e;
}

#search_bar .container-2 .icon {
  position: absolute;
  top: 50%;
  margin-left: 17px;
  z-index: 1;
  color: #6bbb06;
}

#search_bar .container-2:hover .icon {
  color: #aac500;
}

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div id="search_bar">
  <div class="container-2">
    <input type="search" id="search" placeholder="Search..." />
    <span class="icon"><i class="fa fa-search"></i></span>
  </div>
</div>