2 side by side divs of different height aligned

Question

I have 2 different height divs side by side:

.box {
      color: white;
      display: inline-block;
      }
      
#box-a {
        background-color: black;
        height: 90px;
        width: 100px;
       }
       
#box-b {
        background-color: blue;
        height: 50px;
        width: 100px;
       }

<div class="box" id="box-a">
  <p> div a </p>
</div>
<div class="box" id="box-b">
   <p> div b </p>
</div>

Now I want something like this

and no matter how hard I have tried and researched I can't get it to work.

Answer 1

My suggestion:

.box {
  color: white;
  margin-right: 10px;
}

#box-a {
  background-color: black;
  height: 90px;
  width: 100px;
}

#box-b {
  background-color: blue;
  height: 50px;
  width: 100px;
}

.wrapper {
  display: flex;
  align-items: center;
}

<div class="wrapper">

  <div class="box" id="box-a">
    <p> div a </p>
  </div>
  <div class="box" id="box-b">
    <p> div b </p>
  </div>

</div>

If you also want to center boxes horizontally, just add justify-content: center to css wrapper rule set.

Answer 2

Try adding this in your css

 #box-b {
     position:relative;
     top:20px;
 }

.box {
  color: white;
  display: inline-block;
}

#box-a {
  background-color: black;
  height: 90px;
  width: 100px;
}

#box-b {
  background-color: blue;
  height: 50px;
  width: 100px;
}

#box-b {
  position: relative;
  top: 20px;
}

<div class="box" id="box-a">
  <p> div a </p>
</div>
<div class="box" id="box-b">
   <p> div b </p>
</div>