I'm encountering issues keeping all 3 components of the Bootstrap-based `navbar` in one horizontal row. This navbar has **fluid width**.

**Question:** How can we tweak the code to get all the 3 items (from left to right: `a`, `form` and `ul`) to be arrange in one line? The `form` should take 100% of the space remaining betweem the orange color `a` and the Login/Signup `ul`.

**Bootply:** <http://www.bootply.com/oEkHN0DVmE>

**Currently**

[![enter image description here](https://i.stack.imgur.com/WtOZu.png)](https://i.stack.imgur.com/WtOZu.png)

**Desired**

[![enter image description here](https://i.stack.imgur.com/9HVIs.png)](https://i.stack.imgur.com/9HVIs.png)

**HTML**

```
<nav class="navbar navbar-default navbar-fixed-top">

    <a class="brand" href="#">
        <img src="/img/logo-white.png">
    </a>

    <form role="form" class="form-horizontal search-form">        
        <!-- <i class="fa fa-search"></i> -->
        <input type="text" class="form-control" placeholder="Search">
    </form>

    <ul class="nav navbar-nav pull-right">
        <li><a href="/users/sign_in">Login</a></li>
        <li><a href="/users/sign_up">Sign up</a></li>
    </ul>

</nav>

```

**CSS**

```
.brand {
    width: 170px;
    height: 80px;
    background-color: #fc4310;
    display: inline-block
}

.search-form {
    width: 100%;
    height: 30px;
    display: inline-block;
}

```