How to make animated search form inside a solid re

Question

I have a screenshot as shown below which I have to replicate in HTML/CSS.

At this moment, I am able to replicate this in fiddle (with no search-icon and surrounding white square rectangle).

The HTML and CSS codes which I have use in order to make the blue solid rectangle bar is:

HTML:

<div class="nav-top-searchbar">
    <form>

        <input type="text" name="search">
        <div style="">
            <img tabindex="1" src="https://s9.postimg.org/d6s4xvykv/Ellipsis.png" id="ellipsis">
            <div class="dropdown">
                <li><a href="#">View Status</a><i class="fa fa-angle-down" aria-hidden="true"></i></li>
                <li><a href="#">Release Bills</a></li>
                <li><a href="#">Add Attendee</a></li>
                <li><a href="#">Export as</a></li>
                <li><a href="#">View in Google Sheets</a></li>
                <li><a href="#">Send Notifications</a></li>
            </div>
        </div>


    </form>
</div>

CSS:

.nav-top-searchbar {
    position: relative;
}

#ellipsis {
    top: 12px;
    position: absolute;
    right: 43px;
    cursor: pointer;
}

#ellipsis:focus {
    outline: none;
}

#ellipsis:focus+.dropdown {
    display: block;
}

input[type=text] {
    width: 100%;
    background: #10314c;
}

.dropdown {
    background-color: #FFFFFF;
    display: none;
    /* padding-left: 2%; */
    position: absolute;
    /* height: 150px; */
    right: 0;
    width: 200px;
    z-index: 10;
    list-style-type: none;
    padding-top: 25px;
    padding-bottom: 25px;
    box-shadow: 0 0 15px #888;
    top: 2px;
}

Problem Statement:

I am wondering what changes I need to do in the above CSS codes, so that on hitting search icon, the surrounding white square box across search icon should expand. inside the dark blue solid rectangle bar somewhat similar to this (but it should be inside the dark blue solid rectangle bar).

In my fiddle, I am able to make dark blue solid rectangle bar.