align div in header -content

[LefterisKoumis]

Trying to place the arrow icon to the far right side of the header -content div.

<calcite-panel id="feature_info" with-Scale="l">
          <div id="header-content" slot="header-content" style="font-size: large; font-weight: bold; float: right">
            Feature Info
            <div style="float:right">
              <calcite-icon icon="arrow-bold-right" id="next"></calcite-icon>
            </div>
          </div>

          
        </calcite-panel>

[BenElan]

Hi @LefterisKoumis, you can use Panel's header-actions-end slot. Here is a sample: 

https://codepen.io/benesri/pen/gOeOeLp?editors=1000

[LefterisKoumis]

By using the slot, can we control the location of the arrow like adding a vertical alignment and padding so it is not at the extreme end of the panel, like this:

[BenElan · Accepted solution]

I edited the codepen a bit, is this what you're looking for? 

https://codepen.io/benesri/pen/gOeOeLp