javascript - How to vertically align the elements in two divs? -

<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 2 divs. 1 div contains <label> elements , div contains <input> elements. 2 divs aligned horizontally. need align labels , input elements vertically each label has it's input underneath.

i may achieve above requirement putting <label> , <input> elements placing them in <table> rows/columns. require them use <div>.

could me out on ?

short answer, try css

#div1 label.someclass1 { display: inline-block; margin: 0 5px; } #div1 label.someclass1, #div2 input.someclass2 { width: 100px; } #div2 input.someclass2 { margin: 0 0 0 10px; } 

---

long answer, make exact pictured in question, use html5 placeholder attribute , css3 border-radius:

#div1 label {   display: inline-block;   font-weight: bold;   margin: 0 5px; } #div1 label, #div2 input {   width: 100px; } #div2 input {   border-radius: 5px; -webkit-border-radius: 5px;   border-width: 1px;   padding: 2px;   margin: 0 0 0 10px;  } 

.

<div id="div1">     <label>price 1</label>     <label>price 2</label>      <label>price 3</label>      <label>price 4</label>  </div> <div id="div2">     <input type="text" placeholder="price"/>     <input type="text" placeholder="price"/>     <input type="text" placeholder="price"/>     <input type="text" placeholder="price"/> </div> 

to finetune css3 effects, see css3generator