title: Make two html elements stay on same line using Bootstrap responsive design
body: <p>Probably easy CSS, but I've looked at this for WAY to long now.</p>
  
  <p>I want to have two elements on same line:</p>
  
  <ul>
  <li>Textbox </li>
  <li>Search icon image</li>
  </ul>
  
  <p>The search icon should stay same size no matter width, the textbox should align 100% of the space (but still make sure the icon is right next to it.</p>
  
  <p>My problem can be seen in this image (they will not align because of the 100% width of textbox):</p>
  
  <p><img src="https://i.stack.imgur.com/2omlF.png" alt="enter image description here"></p>
  
  <p>My markup:</p>
  
  <pre><code>&lt;div class="SearchBox"&gt;
                          &lt;div class="searchDiv"&gt;
                              &lt;div class="searchDivFullSpan"&gt;
                                  &lt;asp:TextBox runat="server" ID="SearchOnGoogleBox" Height="34px"&gt;&lt;/asp:TextBox&gt;
                              &lt;/div&gt;
                              &lt;asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Resources/Images/SearchIcon.png" OnClick="SearchBtn_Click" ToolTip="Søg efter et emne" Height="48px" OnClientClick="_gaq.push(['_trackEvent', 'Global_master', 'Search for content']);" /&gt;
                          &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>My css:</p>
  
  <pre><code>.SearchInputBox {
      border: 1px solid #C6D1AD;
      font-size: 20pt;
  
      background-color: #FAFAFA;
  }
  
  .searchDiv {
      padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  }
  
  .searchDivFullSpan {
      display: inline;
  }
  
  .searchDivFullSpan input[type=text] {
      width: 100%;
  }
  
  .searchDiv input[type="text"] {
      background-color: #f3f3e9;
      -moz-border-radius: 5px;
      border-radius: 5px;
  }
  </code></pre>
  
  <p>Any hints? Would really appreciate it :-)</p>