Input transition

Question

I try to animate my search button.
When you click on it, it should expand and slide to the side.
The animation is no problem in css, but in front of the search bar is a div, which does not follow the expanding search bar.

<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

I would add the :before to the input. But it is not possible in css.

Edit
HERE IS WHAT I WANT

Answer 1

Just position the .test element as relative and the :before to 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