Html 如何对齐相邻的两个div而不发生碰撞？

我试图创建一个网站的标题，标志和名称位于左侧，标签位于中心。我有两个div，第一个是logo和name，另一个是tabs（列表）。但它们不是水平对齐的，而不是一个div低于另一个div。我使用了float，但它似乎不像我希望的那样工作，因为其他div和元素与浮动div冲突。我确实知道有人问过类似的问题，但他们不适合我

.header{
宽度：100%；
边框：纯红；
}
#商标{
边框：纯绿色；
宽度：15%；
}
#标志{
宽度：70px；
}
#商标名{
浮动：对；
}
#分类表{
边框：纯黑；
宽度：50%；
文本对齐：居中；
左边缘：25%；
}
#李列表{
显示：内联；
利润率：20px；
}

光环

关于
TCH
合伙人
接触

试试这个

.header{
宽度：100%；
边框：纯红；
}
#商标{
边框：纯绿色；
宽度：20%；
显示器：flex；
}
#标志{
宽度：70px；
}
#商标名{
浮动：对；
}
#分类表{
边框：纯黑；
宽度：50%；
文本对齐：居中；
左边缘：25%；
}
#李列表{
显示：内联；
利润率：20px；
}

光环

关于
TCH
合伙人
接触