Css 2个不同高度的并排div对齐

我有两个并排的不同高度的潜水器：

.box{
颜色：白色；
显示：内联块；
}
#方框a{
背景色：黑色；
高度：90px；
宽度：100px；
}
#方框b{
背景颜色：蓝色；
高度：50px；
宽度：100px；
}

a组

b组

我的建议：

.box{
颜色：白色；
右边距：10px；
}
#方框a{
背景色：黑色；
高度：90px；
宽度：100px；
}
#方框b{
背景颜色：蓝色；
高度：50px；
宽度：100px；
}
.包装纸{
显示器：flex；
对齐项目：居中；
}

a组

b组

尝试将其添加到css中

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

.box{
颜色：白色；
显示：内联块；
}
#方框a{
背景色：黑色；
高度：90px；
宽度：100px；
}
#方框b{
背景颜色：蓝色；
高度：50px；
宽度：100px；
}
#方框b{
位置：相对位置；
顶部：20px；
}

a组

b组