Question

I am trying to put on the same line $('.prize-item input') and $('.prize-edit')

Here is the DOM structure (1) and the CSS code (2).

I tried to sue the display:inline-block with no success.

The prerequisite is the following:
1) You must not use position absolute.
2) Resizing the screen, the distance between the button and the input box should not change.
3) The DOM structure should be changed only if it is not possible to obtain the result I requested with CSS.

Demo: http://jsfiddle.net/jBme9/8/

---

(1)

<div class="control-group">
    <div class="controls">
        <div class="prize-edit">
            <button type="button" class="btn" data-toggle="collapse" data-target="">Edit Same line</button>
        </div>
        <div class="prize-item">
            <div class="control-group ">
                <label class="control-label">Name</label>
                <div class="controls">
                    <input type="text" class="form-prize-item-name" value="prize same line">
                </div>
            </div>
        </div>

    </div> 
</div>

​

(2)

.prize-edit {
    float: right;
    display: inline-block;
}

.prize-item input {
    float: left;
    display: inline-block;
}

Answer 1

You can use relative positioning. Please adjust these values for your real page.

Demo

Code:

.controls button {
    float: right;
    position:relative;
    top:38px;
    right:17px;
}

I used pixels ’cause you’re using pixels, but this can be done with ems too.

---

To push the button outside the input, add another class to the input’s wrapper. Let’s call it “controlsWrapper”.

So that you’ll have in html:

<div class="controls controlsWrapper"><input...other stuff...></div>

And in CSS

.controls button {
    float: right;
    position:relative;
    top:38px;
}
.controlsWrapper {
    box-sizing: border-box;
    width:100%;
    padding-right:40px; /* width of the button + some space */
}

Check the demo