title: Aligning multiple elements with CSS
body: <p>All,</p>
  
  <p>I am trying to align a few elements, floated right and inline but I am not having much luck.</p>
  
  <p>Here is what I am trying to do (see 3 elements on the right inside light blue header )</p>
  
  <p><img src="https://i.stack.imgur.com/V52kO.png" alt="enter image description here"></p>
  
  <p><strong>I am ending up with this:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/laDaS.png" alt="enter image description here"></p>
  
  <p><strong>Live Example</strong>
  <a href="http://jsfiddle.net/castonzo/3G4jb/" rel="nofollow noreferrer">http://jsfiddle.net/castonzo/3G4jb/</a></p>
  
  <p><strong>My HTML</strong></p>
  
  <pre><code> &lt;div id="addCounselorSection"&gt;
       &lt;div class="blue-toolbar"&gt;
           &lt;span class="blue-toolbar-title"&gt;Club Counselors&lt;/span&gt;
           &lt;div class="blue-toolbar-search-tools"&gt;
               &lt;div class="blue-toolbar-search-tools-title"&gt;Find counselors&lt;/div&gt;
               &lt;div&gt;&lt;input type="text" /&gt;&lt;/div&gt;
               &lt;div class="blue-toolbar-search-tools-link"&gt;&lt;a href="#"&gt;Add&lt;/a&gt;&lt;/div&gt;
  
           &lt;/div&gt;
       &lt;/div&gt; 
   &lt;/div&gt;
  </code></pre>
  
  <p><strong>My CSS</strong></p>
  
  <pre><code>/****** Toolbar ****************/
  .blue-toolbar {
  
      background-color: #086CA1;
      border: 1px solid #235B79;
      height: 45px;
      width: auto;
      margin-bottom: 13px;
      margin-top: 20px;
      position: relative;
  }
  
  .blue-toolbar-title {
  
      position: absolute; 
      bottom: 0; 
      left: 0; 
      float:left; 
      padding-left:5px; 
      padding-bottom:4px; 
      color:#ffffff; 
      font-weight:bold; 
      font-size:18px;
  }
  
  .blue-toolbar-search-tools {
  
      float: right;
      width: auto;
      display: block;
  }
  
  .blue-toolbar-search-tools-title {
  
      color:#ffffff; 
      font-weight:bold; 
      font-size:14px;
      float: left;
      position: absolute; 
      bottom: 0;
      right: 0;
  }
  
  .blue-toolbar-search-tools a{
      color:#ffffff;
      font-weight:bold;
  
  }
  </code></pre>