Why is text-align:right; not work properly?

Question

I am new in UI or web development .I am trying to make simple simple pages .So I take http://ionicframework.com/getting-started/ page .And trying to make same as in my demo application .I make little bit same as site.but i am facing one issue .On header there is search bar (input field in front of this text "Questions? Head over to our Community Forum to chat with others using the framework. ").I need to make search field in front of given text .I already use text-align :right; here is my code http://jsfiddle.net/oLws3fsk/1/

<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<div>
    <div class="header">
        <ul class="navbar">
            <li><a href="#">product</a></li>
            <li><a href="#">Getting Started</a></li>
            <li><a href="#">docs</a></li>
            <li><a href="#">showcase</a></li>
            <li><a href="#">forum</a></li>
            <li><a href="#">Blog</a></li>
        </ul>
    </div>
    <div class="container">
         <h1>Getting Started with Ionic</h1>

        <p>Build mobile apps faster with the web technologies you know and love</p>
        <div class="smallheader">
            <div class="col-sm-8 news-col">Questions? Head over to our <a href="http://forum.ionicframework.com/">Community Forum</a> to chat with others using the framework.
            <div class="search-bar" style="visibility: visible;">
  <span class="search-icon ionic"><i class="ion-ios7-search-strong"></i></span>
  <input type="search" id="search-input" value="Search">
</div>
          </div>

        </div>
    </div>
</div>

Answer 1

Divs are block-level elements and so are presented on a new line unless you tell them otherwise.

You could use display:inline-block to present the searchbox inline (ie, next to the text):

.smallheader .search-bar {
  display:inline-block;/* display inline so it remains in the flow */
  border :1px solid green;
}

http://jsfiddle.net/oLws3fsk/2

or float the search box to the right:

.smallheader .search-bar {
  float:right;/* float to the right */
  border :1px solid green;
}
.smallheader:after {/* clear the float so that the parent does not collapse */
  content: "";
  display: table;
  clear: both;
}

http://jsfiddle.net/oLws3fsk/3/

These are not the only solutions. You could use absolute positioning , table-layout or flexbox instead.