Question: ![enter image description here](https://i.stack.imgur.com/vXHw9.jpg)

```
<div id="div1">

    <label class="someClass1">Price 1</label>
    <label class="someClass1">Price 2</label> 
    <label class="someClass1">Price 3</label> 
    <label class="someClass1">Price 4</label> 
</div>
<div id="div2">
    <input type="text" class="someClass2"/>
    <input type="text" class="someClass2"/>
    <input type="text" class="someClass2"/>
    <input type="text" class="someClass2"/>
</div>

```

I have two divs. One div contains `<label>` elements and another div contains `<input>` elements. The two divs are aligned horizontally. I need to align the labels and input elements vertically so that each label has it's input underneath. 

I may achieve the above requirement by putting the `<label>` and `<input>` elements by placing them in `<table>` rows/columns. But I require them to use `<div>`. 

Could someone help me out on this ?

Answer: 
To get the divs on same row with inputs below them, use below css

```
#div1 label { display: inline-block; }
#div1 label, #div2 input { width: 100px; }

```

Check Demo here <http://jsfiddle.net/2wdUT/>
Without css you can achieve it by using such an HTML structure -

```
    <div id="div1">
      <label class="someClass1">Price 1</label>
      <div><input type="text" class="someClass2"/></div>
    </div>
    <div id="div2">
      <label class="someClass1">Price 2</label> 
      <div><input type="text" class="someClass2"/></div>
    </div>
    <div id="div3">
      <label class="someClass1">Price 3</label>  
      <div><input type="text" class="someClass2"/></div>
    </div>
    <div id="div4">
      <label class="someClass1">Price 4</label> 
      <div><input type="text" class="someClass2"/></div>    
    </div>

```