I have to implement a search functionality which has the following layout:

[Search Input (visible on click in search icon)] SearchIcon ClearIcon RefreshIcon

All these are part of the a horizontal layout. 

I am combining search input and icon in a directive (called my-search). For reasons I cannot explain here clear and refresh is not part of the directive.

Here is the HTML(template) I have for the directive including the search text and icon:

```
<div class="my-search">
    <input class="search"
           type="search"
           placeholder="{{placeholder}}"
           ng-model="model"
           ng-change="onSearchTextChange(model)"
           ng-show="click"               
           ng-init="click=false"
            />
    <div class="circle main-icon" ng-click="click=true">
        <div class="fa fa-search internal-icon"></div>
    </div>

</div> 

```

Here is the css:

```
.my-search {
    float: left;
    position: relative;
    box-shadow: none;
    height: 0;
}
.my-search .search{
    float: left;
    display: inline-block;
    width: 25rem;
    height: 3rem;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
    box-shadow: none;
    background-color:transparent ;
    font-size: 1.8rem;
    border-radius: 0;
    position: relative;
}

.my-search .circle{
    width: 3rem;
    height: 3rem;
}
.my-search .main-icon{
    float: right;
    position: relative;
    background-color:transparent ;
    border: 2px solid #018BD3;
    padding-top:5px !important;
    left: -34px;
    transition-delay: 0.5s;
}

.my-search .main-icon .internal-icon{
    position: absolute;
    color:#018BD3;
    width: 3rem;
    margin-top: 1px;
    margin-left: 7px ;
}

```

The search input and icon aligns properly but however when I use the directive in combo with clear and refresh the clear and refresh icons are added on the right of the text input (as opposed to search icon) when the input is visible. 

Here is what I have for getting all four in horizontal layout:

```
<div class="container">
    <my-search> model="model" placeholder="placeholder" </my-search>
       <div>
            <div class="fa fa-bell"></div>
       </div>
       <div>
            <div class="fa fa-bars"></div>
       </div>
 </div>

```

The issue is when the input is shown on the left, both the bell (clear) and bar (refresh) divs appear right to the input as opposed to the search icon.

```
.container{
float: right;
  padding-right: 30px;
}

```

I think the issue is somehow, when the search div resizes to show the input, the overall floating appears with respect to that as opposed to the search icon. Any idea how I can get this right?