html - Floating Multiple Elements Right Correctly Within Menu -

i know has been asked before i'm having trouble getting work in case. i'm trying display menu bar search option , inline text left. when float both right, either way, can't desired order. here's jfiddle: https://jsfiddle.net/z8f890ln/

i tried fix using containing divs , using code: html

    <div class="right">     <span class="navbar-text">          navbar text inline element      </span>     <div class="right-right">     <form>          <input class="form-control mr-sm-2" type="text" placeholder="search">          <button class="btn btn-outline-success my-2 my-sm-0 button-arrow" type="submit">search</button>     </form>     </div>     </div> 

css

.right{     display: inline-block;     float: right; } .right .right-right{     float: right;     display: inline; } 

you don't need css classes. use navbar-form navbar-right...

<form class="navbar-form navbar-right" role="search">         <div class="form-group">           navbar text           <input type="text" class="form-control" placeholder="search">         </div>         <button type="submit" class="btn btn-default">search</button> </form> 

http://www.bootply.com/pqnzsnrkj7#