diff --git a/code-gen-library/HierarchicalGridPinHeaderTemplate/Blazor.js b/code-gen-library/HierarchicalGridPinHeaderTemplate/Blazor.js
index 32593400b..7765d3b2e 100644
--- a/code-gen-library/HierarchicalGridPinHeaderTemplate/Blazor.js
+++ b/code-gen-library/HierarchicalGridPinHeaderTemplate/Blazor.js
@@ -4,9 +4,9 @@ igRegisterScript("HierarchicalGridPinHeaderTemplate", (ctx) => {
     window.toggleColumnPin = function toggleColumnPin(column) {
             column.pinned = !column.pinned;
     }
-    return html`<div>
-    <span style="float:left">${ctx.column.field}</span>
-    <span style="float:right" @click=${() => toggleColumnPin(ctx.column)}>📌</span>
+    return html`<div style="display:flex;">
+    <span>${ctx.column.field}</span>
+    <span style="margin-left: auto;" @click=${() => toggleColumnPin(ctx.column)}>📌</span>
 </div>`;
 }, false);
 //end template
\ No newline at end of file
diff --git a/code-gen-library/HierarchicalGridPinHeaderTemplate/React.tsx b/code-gen-library/HierarchicalGridPinHeaderTemplate/React.tsx
index 8d0fff4b9..3609ec9b5 100644
--- a/code-gen-library/HierarchicalGridPinHeaderTemplate/React.tsx
+++ b/code-gen-library/HierarchicalGridPinHeaderTemplate/React.tsx
@@ -9,9 +9,9 @@ export class HierarchicalGridPinHeaderTemplate {
     public hierarchicalGridPinHeaderTemplate = (props: {dataContext: IgrColumnTemplateContext}) => {
         const column = (props.dataContext as any).column;
         return (
-            <div>
-                <span style={{float: 'left'}}>{column.field}</span>
-                <span style={{float: 'right'}} onClick={(e: any) => this.toggleColumnPin(column)}>📌</span>
+            <div style={{display: 'flex'}}>
+                <span>{column.field}</span>
+                <span style={{marginLeft: 'auto'}} onClick={(e: any) => this.toggleColumnPin(column)}>📌</span>
             </div>
         );
     }
diff --git a/code-gen-library/HierarchicalGridPinHeaderTemplate/WebComponents.ts b/code-gen-library/HierarchicalGridPinHeaderTemplate/WebComponents.ts
index 9ac32f09e..7ebd72050 100644
--- a/code-gen-library/HierarchicalGridPinHeaderTemplate/WebComponents.ts
+++ b/code-gen-library/HierarchicalGridPinHeaderTemplate/WebComponents.ts
@@ -11,9 +11,9 @@ export class HierarchicalGridPinHeaderTemplate {
 public hierarchicalGridPinHeaderTemplate = (ctx: IgcColumnTemplateContext) => {
 
     const column = (ctx as any).column;
-    return html`<div>
-                 <span style="float:left">${column.field}</span>
-                 <span style="float:right" @click=${(e: any) => this.toggleColumnPin(column)}>📌</span>
+    return html`<div style="display:flex;">
+                 <span>${column.field}</span>
+                 <span style="margin-left: auto;" @click=${(e: any) => this.toggleColumnPin(column)}>📌</span>
                </div>`;
 };
 //end content
diff --git a/code-gen-library/WebGridPinHeaderTemplate/Blazor.js b/code-gen-library/WebGridPinHeaderTemplate/Blazor.js
index e48aa5b97..e363922ce 100644
--- a/code-gen-library/WebGridPinHeaderTemplate/Blazor.js
+++ b/code-gen-library/WebGridPinHeaderTemplate/Blazor.js
@@ -7,9 +7,9 @@ igRegisterScript("WebGridPinHeaderTemplate", (ctx) => {
         col.pinned = !col.pinned;
         grid.markForCheck();
     }
-    return html`<div>
-    <span style="float:left">${ctx.column.field}</span>
-    <span style="float:right" onpointerdown='toggleColumnPin("${ctx.column.field}")'>📌</span>
+    return html`<div style="display:flex;">
+    <span>${ctx.column.field}</span>
+    <span style="margin-left: auto;" onpointerdown='toggleColumnPin("${ctx.column.field}")'>📌</span>
 </div>`;
 }, false);
 //end template
\ No newline at end of file
diff --git a/code-gen-library/WebGridPinHeaderTemplate/React.tsx b/code-gen-library/WebGridPinHeaderTemplate/React.tsx
index 47b4c8556..a701c19e0 100644
--- a/code-gen-library/WebGridPinHeaderTemplate/React.tsx
+++ b/code-gen-library/WebGridPinHeaderTemplate/React.tsx
@@ -8,9 +8,9 @@ export class WebGridPinHeaderTemplateComponent {
 public webGridPinHeaderTemplate = (props: {dataContext: IgrColumnTemplateContext}) => {
     const column = (props.dataContext as any).column;
     return (
-        <div>
-            <span style={{float: 'left'}}>{column.field}</span>
-            <span style={{float: 'right'}} onPointerDown={(e: any) => this.toggleColumnPin(column.field)}>📌</span>
+        <div style={{display: 'flex'}}>
+            <span>{column.field}</span>
+            <span style={{marginLeft: 'auto'}} onPointerDown={(e: any) => this.toggleColumnPin(column.field)}>📌</span>
         </div>
     );
 }
diff --git a/code-gen-library/WebGridPinHeaderTemplate/WebComponents.ts b/code-gen-library/WebGridPinHeaderTemplate/WebComponents.ts
index 499f0c4bc..17286d335 100644
--- a/code-gen-library/WebGridPinHeaderTemplate/WebComponents.ts
+++ b/code-gen-library/WebGridPinHeaderTemplate/WebComponents.ts
@@ -11,9 +11,9 @@ export class WebGridPinHeaderTemplateComponent {
 public webGridPinHeaderTemplate = (ctx: IgcColumnTemplateContext) => {
 
     const column = (ctx as any).column;
-    return html`<div>
-                 <span style="float:left">${column.field}</span>
-                 <span style="float:right" @pointerdown=${(e: any) => this.toggleColumnPin(column.field)}>📌</span>
+    return html`<div style="display:flex;">
+                 <span>${column.field}</span>
+                 <span style="margin-left: auto;" @pointerdown=${(e: any) => this.toggleColumnPin(column.field)}>📌</span>
                </div>`;
     };
 //end content
diff --git a/code-gen-library/WebTreeGridPinHeaderTemplate/Blazor.js b/code-gen-library/WebTreeGridPinHeaderTemplate/Blazor.js
index 69fbf504c..58d806389 100644
--- a/code-gen-library/WebTreeGridPinHeaderTemplate/Blazor.js
+++ b/code-gen-library/WebTreeGridPinHeaderTemplate/Blazor.js
@@ -7,9 +7,9 @@ igRegisterScript("WebTreeGridPinHeaderTemplate", (ctx) => {
         col.pinned = !col.pinned;
         grid.markForCheck();
     }
-    return html`<div>
-    <span style="float:left">${ctx.column.field}</span>
-    <span style="float:right" onpointerdown='toggleColumnPin("${ctx.column.field}")'>📌</span>
+    return html`<div style="display:flex;">
+    <span>${ctx.column.field}</span>
+    <span style="margin-left: auto;" onpointerdown='toggleColumnPin("${ctx.column.field}")'>📌</span>
 </div>`;
 }, false);
 //end template
\ No newline at end of file
diff --git a/code-gen-library/WebTreeGridPinHeaderTemplate/React.tsx b/code-gen-library/WebTreeGridPinHeaderTemplate/React.tsx
index 9195a2b86..cc3338de6 100644
--- a/code-gen-library/WebTreeGridPinHeaderTemplate/React.tsx
+++ b/code-gen-library/WebTreeGridPinHeaderTemplate/React.tsx
@@ -8,9 +8,9 @@ export class WebTreeGridPinHeaderTemplate {
 public webTreeGridPinHeaderTemplate = (props: {dataContext: IgrColumnTemplateContext}) => {
     const column = (props.dataContext as any).column;
     return (
-        <div>
-            <span style={{float: 'left'}}>{column.field}</span>
-            <span style={{float: 'right'}} onPointerDown={(e: any) => this.toggleColumnPin(column.field)}>📌</span>
+        <div style={{display: 'flex'}}>
+            <span>{column.field}</span>
+            <span style={{marginLeft: 'auto'}} onPointerDown={(e: any) => this.toggleColumnPin(column.field)}>📌</span>
         </div>
     );
 }
diff --git a/code-gen-library/WebTreeGridPinHeaderTemplate/WebComponents.ts b/code-gen-library/WebTreeGridPinHeaderTemplate/WebComponents.ts
index 574758359..2237c0aff 100644
--- a/code-gen-library/WebTreeGridPinHeaderTemplate/WebComponents.ts
+++ b/code-gen-library/WebTreeGridPinHeaderTemplate/WebComponents.ts
@@ -11,9 +11,9 @@ export class WebTreeGridPinHeaderTemplate {
 public webTreeGridPinHeaderTemplate = (ctx: IgcColumnTemplateContext) => {
 
     const column = (ctx as any).column;
-    return html`<div>
-                 <span style="float:left">${column.field}</span>
-                 <span style="float:right" @pointerdown=${(e: any) => this.toggleColumnPin(column.field)}>📌</span>
+    return html`<div style="display:flex;">
+                 <span>${column.field}</span>
+                 <span style="margin-left: auto;" @pointerdown=${(e: any) => this.toggleColumnPin(column.field)}>📌</span>
                </div>`;
     };
 //end content