html - new line with "NoWrap" -

it possible put labels above of each textbox without using table? problem when try put "new line" inside "nowrap".

basically got array of array, have "name" , "value", value changed user, first set of elements display side side, next set of elements display below, side side, , go on. can simple code, labels @ left of 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 try break line inside, every thing mess up. tried put div inside float no luck that. looking examples found couldn't put them together

<div id='div1' style='width:300px; border: 1px solid black; white-space:nowrap; padding-right: 50px;'>   <label>test&nbsp;<br />     <input type='text' style='width:100%;' id='inputbox'/>   </label>   <label>test&nbsp;<br />     <input type='text' style='width:100%;' id='inputbox'/>   </label> </div> 

that i'm looking for

label a1    label a2    label a3 textbox...  textbox...  textbox...  .... goes scroll forever  label b1    label b2 textbox...  textbox...  label c1  textbox... 

it's idea associate inputs , text using label:

<label>label a1 <input type="text" /></label> 

and can use these styles:

label { display: inline-block; } /* 1 next others */ input { display: block; } /* line break between text , 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>