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

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
'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

Answer 1

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.

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

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;
}