new line with "NoWrap" - html

Question

It is possible to put the labels above of each textbox without using table? My problem is when i try to put a "new line" inside a "NoWrap".
Basically i got an array of array, that have "name" and "Value", the value will be changed by user, so the first set of elements will display side by side, the next set of elements will be display below, side by side, and go on. I can do with this simple code, but the labels are at LEFT of the component.
<style>
.NoWrap{white-space:nowrap;margin-top:5px;margin-left:5px;}
</style>
<div style="border:1px solid black; width:500px;height:800px;overflow:auto;">
<div class="NoWrap">
Label A1 <input type="text" />
Label A2 <input type="text" />
Label A3 <input type="text" />
Label A4 <input type="text" />
</div>
<div class="NoWrap">
Label B1 <input type="text" />
</div>
<div class="NoWrap">
Label C1 <input type="text" />
Label C1 <input type="text" />
</div>
<div class="NoWrap">
Label D1 <input type="text" />
</div>
</div>
But when i try to break a line inside, every thing mess up. I Tried to put a div inside with float but no luck with that. Looking for examples i found some but i couldn't put them together
<div id='div1' style='width:300px; border: 1px solid black; white-space:nowrap; padding-right: 50px;'>
<label>Test <br />
<input type='text' style='width:100%;' id='inputBox'/>
</label>
<label>Test <br />
<input type='text' style='width:100%;' id='inputBox'/>
</label>
</div>
That is what i'm looking for
Label A1 Label A2 Label A3
TextBox... Textbox... Textbox... .... goes to scroll forever
Label B1 Label B2
TextBox... Textbox...
Label C1
TextBox...

Answer 1

It's always a good idea to associate your inputs and their text using a label:
<label>Label A1 <input type="text" /></label>
And then you can use these styles:
label { display: inline-block; } /* One next to the others */
input { display: block; } /* Line break between text and input */
.wrapper {
border: 1px solid black;
width: 500px;
height: 800px;
overflow: auto;
}
.wrapper > div {
white-space: nowrap;
margin-top: 5px;
margin-left: 5px;
}
label {
display: inline-block;
}
input {
display: block;
}
<div class="wrapper">
<div>
<label>Label A1 <input type="text" /></label>
<label>Label A2 <input type="text" /></label>
<label>Label A3 <input type="text" /></label>
<label>Label A4 <input type="text" /></label>
</div>
<div>
<label>Label B1 <input type="text" /></label>
</div>
<div>
<label>Label C1 <input type="text" /></label>
<label>Label C2 <input type="text" /></label>
</div>
<div>
<label>Label D1 <input type="text" /></label>
</div>
</div>

Answer 2

If you put your text inside proper html label elements, you could remove them from the normal flow of the document and position them slightly above where they would normally appear.
For example, make your containers position: relative and your label elements position: absolute. Then give your container a margin-top: XXpx and your label elements a top: -XXpx
You can see this working here (jsbin link):
<div style="border:1px solid black; width:500px;height:800px;overflow:auto;">
<div class="NoWrap">
<label for="A1">Label A1</label>
<input id="A1" type="text" />
<label for="A2">Label A2</label>
<input id="A2" type="text" />
<label for="A3">Label A3</label>
<input id="A3" type="text" />
<label for="A4">Label A\4</label>
<input id="A4" type="text" />
</div>
</div>
And styles:
.NoWrap{
white-space:nowrap;
margin-top:25px;
margin-left:5px;
position: relative;
}
label {
position: absolute;
top: -20px;
}

Answer 3

you can use position:relative + margins
.NoWrap{white-space:nowrap;margin-top:5px;margin-left:5px;}
input {
margin-bottom:3em;/* make room under */
width:5em;/* resize to yyour needs */
margin-right:-3em;/* reduce virtually rooms it uses , tune to your needs */
position:relative;/* now time to move it at screen */
top:1.8em;/* enough lower than baseline */
right:5em;/* its own size */
}
<div style="border:1px solid black; width:500px;height:800px;overflow:auto;">
<div class="NoWrap">
Label A1 <input type="text" />
Label A2 <input type="text" />
Label A3 <input type="text" />
Label A4 <input type="text" />
</div>
<div class="NoWrap">
Label B1 <input type="text" />
</div>
<div class="NoWrap">
Label C1 <input type="text" />
Label C1 <input type="text" />
</div>
<div class="NoWrap">
Label D1 <input type="text" />
</div>
</div>