Prevent text from wrapping under the input field

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

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 3

1. float: left on the input worked
2. 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