Css 在Antd折叠面板标题中，将2个div与其他div一个接一个地排列在一起

我正在使用，我想在折叠的面板标题中添加两行文字，一行在另一行的下方，并使用额外的属性渲染一些图标，如下所示：

     <Panel
        header={
          <div>
            <div>This is panel header 1</div>
            <div style={{ fontSize: "10px" }}>This is panel header 1</div>
          </div>
        }
        key="1"
        extra={genExtra()}
      >

我可以删除填充物等以获得所需的外观，但是作为getExtra（）的一部分渲染的图标（右侧的设置图标）被弄乱了。PFA显示下图。我怎样才能把它做好

我还试着用Row、Col将整个Header选项卡区域划分为不同的列。即使这样，右边的额外图标也会弄乱

---

TIA

在

getIcon

中，为设置

图标添加以下样式属性

style={{position: 'absolute', right: '16px', top: '10px'}}

或

如果要使用多个图标，请更改。
.ant collapse header
类样式，如下所示

.ant折叠头{
显示器：flex；
证明内容：之间的空间；
}
非常感谢，有没有一种方法不使用绝对位置，因为我在右侧放置了大量图标和一些文本跨距，希望避免管理位置。如果需要，您应该全局设置
.ant collapse header
。使用iconThanks Ravi中的
.ant collapse header{display:flex；justify content:space-between；}
并删除
style={{{position:'absolute'，right:'16px'，top:'10px'}}
。谢谢你，它使两个目录都成为中心。这里是代码沙盒的链接，请提供建议-