Why div are not aligned horizontally

Question

I am trying to align 2 div s horizontally inside one div .

Here is codepen link Check Here . When I add margin-top to left div it is not moving up.

What am I doing wrong?

 <footer id="contact"> <div class="reservation" style="display: block;border:1px solid red; "> <div class="reserve-address-div" style="display: inline-block;width:45%;border:1px solid red;margin-top:-40px;"> <h4>51 Area, Barmuda Triangle, Mars</h4> <h4>0165466546</h4> <h4>vivek.tarun17@gmail.com</h4> </div> <div class="reserve-booking-div" style="display: inline-block; width:45%;border:1px solid red; "> <form> <input type="text" name="name" placeholder="Name" /><br> <input type="email" name="email" placeholder="Email"/><br> <input type="text" name="subject" placeholder="Subject"/><br> <textarea placeholder="message" rows="5"></textarea><br> <input type="button" value="Submit"> </form> </div> </div> </footer> 

Answer 1

Please try to use vertical-align: top something like this:

<div class="reservation">   
    <div class="reserve-address-div" style="display: inline-block; ... vertical-align:top">     
        ...
    </div>
    <div class="reserve-booking-div" style="display: inline-block; ... vertical-align:top"> 
        ...

vertical-align property is useful.

You can put inline-blocks along with the top of parent element, eg, div .

Answer 2

How about the Flexbox solution:

 .reservation { display: flex; padding: 2.5px; border: 1px solid red; } .reserve-address-div, .reserve-booking-div { flex: 1; margin: 2.5px; padding: 5px; border: 1px solid red; } 

 <footer id="contact"> <div class="reservation"> <div class="reserve-address-div"> <h4>51 Area, Barmuda Triangle, Mars</h4> <h4>0165466546</h4> <h4>vivek.tarun17@gmail.com</h4> </div> <div class="reserve-booking-div"> <form> <input type="text" name="name" placeholder="Name"><br> <input type="email" name="email" placeholder="Email"><br> <input type="text" name="subject" placeholder="Subject"><br> <textarea placeholder="message" rows="5"></textarea><br> <input type="button" value="Submit"> </form> </div> </div> </footer> 

Adjust margin s and padding to your needs.

Answer 3

The reason .reserve-address-div is being pushed down is because the default vertical-align value is set to baseline . As another poster mentioned, setting the vertical-align property to top for .reserve-address-div will remove the space above that div.

You can read more about the issue here .

An alternate solution would be to use flexbox on the .reservation container, as I've demonstrated in the snippet below.

Hope this helps!

 .reservation { border: 1px solid red; display: flex; align-content: center; justify-content: center; width: 100%; } .reserve-address-div { display: inline-block; width: 45%; border: 1px solid red; } .reserve-booking-div { display: inline-block; width: 45%; border: 1px solid red; } 

 <footer id="contact"> <div class="reservation"> <div class="reserve-address-div"> <h4>51 Area, Barmuda Triangle, Mars</h4> <h4>0165466546</h4> <h4>vivek.tarun17@gmail.com</h4> </div> <div class="reserve-booking-div"> <form> <input type="text" name="name" placeholder="Name" /><br> <input type="email" name="email" placeholder="Email" /><br> <input type="text" name="subject" placeholder="Subject" /><br> <textarea placeholder="message" rows="5"></textarea><br> <input type="button" value="Submit"> </form> </div> </div> </footer>