前端排版问题（css）,关于两个上下元素的对齐

这是设计稿

如下这两个区域上面和下面如何对齐，下面是一个三个宽度为33.333%的元素，这两个区域如何高标准还原设计稿,写了一下午，这两个区域总是对齐不了，希望大佬帮忙指点一下，谢谢

inline-block + vertical-align flex + align-items

demo