Prevent text from wrapping under the input field - html

Question

I have card with Input and some text wrapped in span right to it. When text is long it wraps under the checkbox
Codepen: http://codepen.io/padmacnu/pen/bpKOVB
div {
font: 12px arial;
width: 250px;
height: 50px;
background: gray;
border: 1px solid #111111;
}
<div>
<input type="checkbox">
<span>text is too long and wraps under the checkbox</span>
</div>

Answer 1

You can do it like this: http://codepen.io/dirtysmith/pen/QNxzGM
div {
font: 12px arial;
width: 250px;
height: 50px;
background: gray;
border: 1px solid #111111;
}
input{
width:20px;
position:relative;
left: 0px;
vertical-align:middle;
}
span{
width:200px;
position:relative;
left: 0px;
display:inline-block;
vertical-align:middle;
}

Answer 2

You can float the input and make the span a block which establishes a block formatting context.
div {
font: 12px arial;
width: 250px;
height: 50px;
background: gray;
border: 1px solid #111111;
}
input {
float: left;
}
span {
display: block;
overflow: hidden; /* Establish BFC */
}
<div>
<input type="checkbox">
<span>text is too long and wraps under the checkbox text is too long and wraps under the checkbox</span>
</div>
Alternatively, you can use flexbox:
div {
font: 12px arial;
width: 250px;
height: 50px;
background: gray;
border: 1px solid #111111;
display: flex;
}
span {
flex: 1; /* Fill remaining space left by the input */
}
<div>
<input type="checkbox">
<span>text is too long and wraps under the checkbox text is too long and wraps under the checkbox</span>
</div>

Answer 3

float: left on the input worked
Flex also worked like charm
div {
font: 12px arial;
width: 250px;
height: 50px;
background: gray;
border: 1px solid #111111;
}
input {
float: left;
}
<div>
<input type="checkbox">
<span>text is too long and wraps under the checkbox</span>
</div>
http://codepen.io/padmacnu/pen/bpKOVB