Position element, but no space left

Question

I have simple problem. I need to put content to div (width is set), but there isn't space, so browser put it on next line.

Problem is visualized here -> http://jsfiddle.net/QtAQa/1/

HTML

<div class="row">
    <div class="heading">Name:</div>
    <div class="data">
        <input type="text" />
    </div>
    <div class="error">Enter your name, please</div>
</div>

CSS

.row {
    width: 600px;
}
.row div {
    display: inline-block;
}
.heading {
    width: 300px;
    background: red;
}
.data {
    width: 200px;
    background: green;
}
.error {
    color: red;
}

It would be great to somehow put the div.error next to input, but there isn't space left.

I don't want to use position: absolute or position: relative, because I don't know how wide will div.data be.

Can I be done only with css?

Answer 1

It could be done like this:

.row {
    width: 600px;
    overflow: visible;
    position:relative
}
.row div {
    display: inline-block;
}
.heading {
    width: 300px;
    background: red;
}
.data {
    width: 200px;
    background: green;
}
.error {
    color: red;
    position: absolute;
    right: -60px;
    top:0;
}

http://jsfiddle.net/QtAQa/5/

Answer 2

You row is simply to short:

.row {
    width: 600px;
}

Expand that container and the error container will fit.

Demo

Try before buy

An alternative would be using this to force the browser not to break spaces:

.row {
    width: 600px;
    white-space: nowrap;
}

Demo

Try before buy