title: How to prevent bootstrap from collapsing input and img link at same line, whilst spanning 100%
body: <h2>Basic concept</h2>
  
  <p>Create a selectbox + img link <strong>inline</strong> that span either max width (as set by CSS) or max window width. but stay inline whatever the horizontal size of the screen.</p>
  
  <h2>Using:</h2>
  
  <ul>
  <li>VS2015</li>
  <li>MVC 4</li>
  <li>Bootstrap 3.3.7</li>
  <li>Standard Site.CSS
  (sets max width of input/select/textbox to 400px)</li>
  </ul>
  
  <p>With basic HTML code like so:</p>
  
  <pre><code>&lt;div class="form-group"&gt;
      &lt;label for="cmbDivisionGroup" class="control-label"&gt;Division Group&lt;/label&gt;
      &lt;div class="form-inline"&gt;
              &lt;select id="cmbDivisionGroup" class="form-control" name="DivisionGroup" style="width:95%;" &gt;
                  &lt;option value=""&gt;Choose a Division group...&lt;/option&gt;
                  &lt;option value="Some division"&gt;Some Division&lt;/option&gt;
                  &lt;option value="Some other division"&gt;Some other division&lt;/option&gt;
              &lt;/select&gt;
              &lt;span&gt;
                  &lt;a href="/Division/addDivisionGroup" style="display: inline-block;" data-toggle="tooltip" title="Set to 'Not Interested' !"&gt;
                      &lt;img alt="GoTo" src="/Resources/Adds Add file.png" height="30" border="0" width="30"&gt;
                  &lt;/a&gt;
  
              &lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Something like this:
  <a href="https://jsfiddle.net/7f891kj0/1/" rel="nofollow noreferrer">https://jsfiddle.net/7f891kj0/1/</a></p>
  
  <h2>What I've tried...</h2>
  
  <p>Initially, the above code looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/8W92u.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8W92u.jpg" alt="enter image description here"></a></p>
  
  <p>Which is what we want...</p>
  
  <p>But, after Bootstrap reaches its magical 768px, it collapses into:</p>
  
  <p><a href="https://i.stack.imgur.com/u0CtT.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/u0CtT.jpg" alt="enter image description here"></a></p>
  
  <p>Which is <strong>NOT</strong> what we want...</p>
  
  <p>I've tried just about every possible combination of <code>&lt;span&gt;</code> <code>&lt;container&gt;</code> a variety of <code>&lt;col-md-?&gt;</code> embedded <code>&lt;form-inline&gt;</code> and <code>&lt;row&gt;</code> yet none of them seem to make it work as intended...?</p>
  
  <p>I've tried using <code>style="width:95%"</code> and then attaching the img link which works, 'sort of' as it still collapses into two lines.
  I've tried the bootstrap input-addon class but that is not how I would like the UI to look.</p>
  
  <p>There is a other StackOverflow link <a href="https://stackoverflow.com/questions/39009158/how-do-i-keep-a-span-on-the-same-line-as-an-input-using-bootstrap-3">here</a> though that doesn't have an answer to the question.
  And another <a href="https://stackoverflow.com/questions/36150840/bootstrap-span-and-input-full-width-in-the-same-line">here</a> that I do not seem to be able to get working in my example. 
  (Tested: <a href="https://jsfiddle.net/k9hbzvq5/" rel="nofollow noreferrer">https://jsfiddle.net/k9hbzvq5/</a>)</p>
  
  <p>I would appreciate anybody that has a good suggestion ?</p>