title: Search input and button not aligning horizontally properly
body: <p>I am trying to align a form text input and button horizontally on the same line while giving the button a minimum width for a responsive layout. For some reason the minimum width forces the button on to a new line</p>
  
  <pre><code>.search-container{
      width:100%;
      border: 1px solid #000;
      display:block;
   }
  .search-text-container {
      width:90%;
      display:inline-block;
  }
  
  .search-text-container input {
      width:100%;
      height:30px;
  }
  
  .round-icon-container {
      width:10%;
      display:inline-block;
  }
  .round-icon-button {
      min-width:30px;
      display:block;
      width:30px;
      height:30px;
      line-height:normal;
      border: 2px solid #f5f5f5;
      border-radius: 50%;
      color:#f5f5f5;
      text-align:center;
      text-decoration:none;
      background: #464646;
      box-shadow: 0 0 3px gray;
      font-weight:bold;
  }
  .round-icon-button:hover {
      background: #262626;
  }
  
  &lt;div class="search-container"&gt;
      &lt;span class="search-text-container"&gt;
          &lt;form action=""&gt;
              &lt;input type="text" name="fname" /&gt;
          &lt;/form&gt;
      &lt;/span&gt;
      &lt;span class="round-icon-container"&gt;
          &lt;button type="submit" class="round-icon-button"&gt;
              &lt;i class="fa fa-search"&gt;&lt;/i&gt;
          &lt;/button&gt;
      &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have a fiddle here of what I am working on <a href="http://jsfiddle.net/dnssmw83/19/" rel="nofollow">http://jsfiddle.net/dnssmw83/19/</a> any help would be much appreciated</p>