How to make both panels aligned regardless of height?

Question

I have two panels:

They are aligned perfectly. Now, let us say I add text in panel 1 which changes it's height.

It is no longer aligned:

I'm not sure how to fix this or why it is happening. How can I keep both panels aligned regardless what I add to them?

I created a JSFiddle to make it easy to edit: https://jsfiddle.net/8qafwy93/7/

HTML:

<div class="row">
  <div class="panel">
    <h1>Panel 1</h1>
    <p>Remove this</p>
  </div>

  <div class="panel">
    <h1>Panel 2</h1>
  </div>
</div>

CSS:

body{
  background: slategray;
}

.row{
  margin-left: auto;
  margin-right: auto;
}

.panel{
  background: white;
  width: 49%;
  display: inline-block;
}

Answer 1

You can use flexboxes

You add:

.row{
  display: flex;
  justify-content: space-between;
}

This will turn your roll div into a flex contianer and with justify-content you add some space between elements;

If you want to know more about flexboxes i recommend

MDN CSS Tricks

Hope this helps :)

 body{ background: slategray; } .row{ display: flex; justify-content: space-between; margin-left: auto; margin-right: auto; } .panel{ background: white; width: 49%; display: inline-block; } 

 <div class="row"> <div class="panel"> <h1>Panel 1</h1> <p>Remove this</p> </div> <div class="panel"> <h1>Panel 2</h1> </div> </div> 

Answer 2

Since you're using inline-block to horizontally align your elements, uou could add the following code to your panel rule:

vertical-align: middle;

The vertical-align property allow you to specify the vertical alignment of inline inside there inline formatting context.

https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align