Q:

Best way to cling text to an element while also ignoring other div spacing?

I'm trying to add some text after a textbox in-line.  I want it to be "attached" to the textbox, but I also want it to ignore any other divs that would try to force it to a new line.  The reason for this is my text boxes are somewhat close to the border of my wrapper div, and I want the text to not be affected by this wrapper div while still having its positioning relative to the textbox.
Is there a feasible way to do this?  I've tried using absolute positioning but that is making it tough to keep my page responsive.
Edit:
By request, here's the simplest example I can think of:
http://jsfiddle.net/zzaq5h4q/3/

#wrapper {
  width: 40%;
  height: 400px;
  background-color: #cccccc;
}
<div id="wrapper">
  <input type="text" name="textbox" />I want this text to stay inline, even past the wrapper!
</div>

A:

You can stop the text from wrapping by using white-space: nowrap; as it stops the text from breaking at the nearest whitespace when it runs out of space.

nowrap
Collapses whitespace as for normal, but suppresses line breaks (text wrapping) within text.

(https://developer.mozilla.org/en-US/docs/Web/CSS/white-space)
By default overflow is set to visible on #wrapper which means content can spill out of it and still be shown.

visible
Default value. Content is not clipped, it may be rendered outside the content box.

(https://developer.mozilla.org/en-US/docs/Web/CSS/overflow)

#wrapper {
  background-color: #cccccc;
  white-space: nowrap;
  width: 40%;
}
<div id="wrapper">
  <input type="text" name="textbox" />I want this text to stay inline, even past the wrapper!
</div>

