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

Question

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

1. 'break-word'
2. 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

Answer 1

In the form-control, add a display-inline.

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

Data status as,

.data-status {
    display: inline;
    color: red;
    word-wrap: break-word;
}

Default comes with form-control is display:block. This will make span and input inline. Wrap the "Add a data code" within a div.

Here is the complete html and css,

<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'>
                <div>
                <span> Add a data code </span>
                    </div>
                <input type='text' name='data' class='form-control'>

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

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

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;
    color: red;
    word-wrap:break-word;
}
.data-label {
    display: inline-block;
}

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

Answer 2

do some changes in your html code as

<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">
    <div> Add a data code </div>
    <div class="data-status">
    <input class="form-control" type="text" name="data">
    </div>
    <span class="data-status">TEST TEST TEST TEST TEST </span>
    </label>
    </div>
    </form>
</div>

and in your stysheet put

.data-status
{
vertical-align: middle;
}

Answer 3

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.