Arrange 2 DIVs one below another in Antd Collapse Panel Header along with Extras

Question

I am using Antd's Collapse and I would like to add 2 text lines one below another in the Collapse's Panel header along with the extra Property to render some Icons etc like below:

     <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()}
      >

I can remove the Padding etc to make get the look I need, but the Icons(setting icon on the right) I render as part of getExtra() are messed up. PFA the image below. How can I get it right?

I also tried dividing the complete hearder tab area into different Columns using Row, Col. Even then the Extra icons on the right are messed up.

TIA

Answer 1

In the getIcon, for the setting Icon add the following style property.

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

OR

If you want to use multiple icons then change ..ant-collapse-header class styles as below.

.ant-collapse-header{
  display: flex;
  justify-content: space-between;
}