---
title: "How to vertically align the elements in two divs?"  
description: "How to vertically align the elements in two divs?"  
author: "Jayden Bell"  
published: 2013-04-05  
updated: 2013-04-05  
canonical: https://www.mindstick.com/forum/715/how-to-vertically-align-the-elements-in-two-divs  
category: "asp.net mvc"  
tags: ["asp.net mvc"]  
reading_time: 2 minutes  

---

# How to vertically align the elements in two divs?

Hi Everyone!\
<div id="div1">\
<[label](https://www.mindstick.com/articles/12835/print-label-tracking-how-do-these-features-make-auspost-woocommerce-plugin-better) [class](https://www.mindstick.com/blog/165/generic-class-in-c-sharp)="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](https://www.mindstick.com/forum/159209/how-can-i-read-convert-an-input-stream-into-a-string-in-java) type="[text](https://www.mindstick.com/blog/301635/did-people-reinvent-texting-to-express-the-full-range-of-emotions)" 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](https://www.mindstick.com/forum/12847/how-to-add-a-div-contains-asp-label-from-code-behind-in-asp-dot-net) <label> [elements](https://www.mindstick.com/forum/1440/wpf-button-with-multiple-text-elements) and another div contains <input> elements. The two divs are aligned horizontally. I need to align the \
[labels](https://www.mindstick.com/forum/34568/badges-labels-page-headers) and input elements vertically so that each label has it's input underneath.\
I may achieve the above [requirement](https://yourviews.mindstick.com/view/85169/becoming-an-influencer-requirement-of-skills-and-knowledge) by putting the <label> and <input> elements by placing them in rows/columns. But I require them to using <div>.\
Could [someone help me](https://answers.mindstick.com/qa/42311/can-someone-help-me-with-this-question-about-political-parties) out on this ?\
Thanks in [advance](https://www.mindstick.com/blog/33258/jee-mains-and-jee-advance-exams)!

## Replies

### Reply by Vijay Shukla

Hi Jayden!\
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; }

### Reply by AVADHESH PATEL

Hi Jayden!\
try this way!\
#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, to make the exact look you pictured in your question, use HTML5 placeholder attribute and 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>


---

Original Source: https://www.mindstick.com/forum/715/how-to-vertically-align-the-elements-in-two-divs

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.