Q:

How to keep the div and label in the same row?

This is what I wish to achieve: display a message next to an input box.

However, when the message is too long the whole thing goes under the input box.

css
.data-form{
    display: block;
    box-sizing: border-box;
    line-height: 22.8px;
}
.data {
    box-sizing: border-box;
    display: inline-block;
}
.form-group {
    margin-bottom: 15px;
    // box-sizing: border-box;
}
.data-status {
    display: inline-block;
    color: red;
    word-wrap:break-word;
}
.data-label {
    display: inline-block;
}

.form-control {
    width:200px;
    font-size: 16px;
}

html markup
<div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
    <form class='data-form'>
        <div class='data form-group row'>
            <label class='data-label'>
                <span> Add a data code </span>
                <input type='text' name='data' class='form-control'>

                <div class='data-status'>
                   <span class='data-status'>TEST  </span>
               </div>

            </label>

        </div>
    </form>
</div>

I want to keep the whole error message to the right hand side of the input regardless of the length of error text
I have tried 

'break-word'
various different structure such as moving the message inside a div which sits at the same level of label.

Unfortunately they do not work. 
Here is the code that demonstrated the problem 
 http://jsfiddle.net/kongakong/o338t791/3/
Any suggestion? It uses bootstrap css

A:

Just change the .data-status rule to this to remove the inline-block:
.data-status {
    color: red;
    word-wrap:break-word;
}

Here is a fiddle which shows it in action

The inline-block rule is whats forcing the element to remain in a single line. You can also change it to display:inline; but this is the default rule for a span element.

