Входной переход

Question

Я стараюсь оживить мою кнопку поиска.
Когда вы нажимаете на нее, она должна расширяться и скользить в сторону.
Анимация не проблема в css, но перед панелью поиска находится div, который не следует за расширяющейся панелью поиска.

<form> 
    <div class="test"></div> 
    <input type="search" placeholder="Search"> 
</form> 

form{ 
    float:right; 
} 

input[type=search] { 
    background: #E75757 url(http://nerdlove.de/Blog/img/search_icon.svg) no-repeat 15px center; 
    background-size: 25px; 
    border: none; 
    padding: 10px 10px 10px 10px; 
    width: 35px; 
    -webkit-transition: all .5s; 
    -moz-transition: all .5s; 
    transition: all .5s; 
    text-indent:-999px; 
} 

input[type=search]:focus { 
    width: 150px; 
    background-position: -30px; 
    text-indent: 0px; 
} 

.test{ 
    float:left; 
} 

.test:before{ 
    content: no-close-quote; 
    border-top: 40px solid rgba(0, 0, 0, 0); 
    border-left: 0px solid rgba(0, 0, 0, 0); 
    border-right: 18px solid #E75757; 
    float: right; 
    right: 55px; 
    position: absolute; 
} 

Example

Я хотел бы добавить: перед тем к входу. Но это невозможно в css.

Редактировать
HERE IS WHAT I WANT

Answer 1

Просто поместите .test элемент как relative и :before к right: 0;.

.test{ 
    float:left; 
    position: relative; 
} 

.test:before{ 
    content: no-close-quote; 
    border-top: 40px solid rgba(0, 0, 0, 0); 
    border-left: 0px solid rgba(0, 0, 0, 0); 
    border-right: 18px solid #E75757; 
    float: right; 
    right: 0; 
    position: absolute; 
} 

Demo