title: How to place two DOM elements on the same line
body: <p>I am trying to put on the same line <code>$('.prize-item input')</code> and <code>$('.prize-edit')</code> </p>
  
  <p>Here is the DOM structure (1) and the CSS code (2).</p>
  
  <p>I tried to sue the <code>display:inline-block</code> with no success.</p>
  
  <p>The prerequisite is the following:<br>
  1) You must not use position absolute.<br>
  2) Resizing the screen, the distance between the button and the input box should not change.<br>
  3) The DOM structure should be changed only if it is not possible to obtain the result I requested with CSS.</p>
  
  <p>Demo: <a href="http://jsfiddle.net/jBme9/8/" rel="nofollow">http://jsfiddle.net/jBme9/8/</a></p>
  
  <hr>
  
  <p>(1)</p>
  
  <pre><code>&lt;div class="control-group"&gt;
      &lt;div class="controls"&gt;
          &lt;div class="prize-edit"&gt;
              &lt;button type="button" class="btn" data-toggle="collapse" data-target=""&gt;Edit Same line&lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="prize-item"&gt;
              &lt;div class="control-group "&gt;
                  &lt;label class="control-label"&gt;Name&lt;/label&gt;
                  &lt;div class="controls"&gt;
                      &lt;input type="text" class="form-prize-item-name" value="prize same line"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <h2>​</h2>
  
  <p>(2)</p>
  
  <pre><code>.prize-edit {
      float: right;
      display: inline-block;
  }
  
  .prize-item input {
      float: left;
      display: inline-block;
  }
  </code></pre>