diff --git a/src/views/datatable/DataTableFilterDemo.vue b/src/views/datatable/DataTableFilterDemo.vue
index 6bf54ad23..defcfd6c2 100755
--- a/src/views/datatable/DataTableFilterDemo.vue
+++ b/src/views/datatable/DataTableFilterDemo.vue
@@ -194,10 +194,11 @@ export default {
     text-align: left;
 }
 
-.p-multiselect {
-    width: 100%;
-}
-
+.p-filter-column {
+    .p-multiselect, .p-dropdown, .p-inputtext {
+        width: 100%;
+    }
+} 
 .p-dropdown-car-option {
     img {
         vertical-align: middle;
diff --git a/src/views/datatable/DataTableTemplatingDemo.vue b/src/views/datatable/DataTableTemplatingDemo.vue
index 11a2125c4..9bc7d5fdd 100755
--- a/src/views/datatable/DataTableTemplatingDemo.vue
+++ b/src/views/datatable/DataTableTemplatingDemo.vue
@@ -12,9 +12,9 @@
 		<div class="content-section implementation">
 			<DataTable :value="cars">
                 <template #header>
-                    <div style="line-height:1.87em" class="clearfix">
-                        <Button icon="pi pi-refresh" style="float: left"/>
+                    <div class="table-header">
                         List of Cars
+                        <Button icon="pi pi-refresh" />
                     </div>
                 </template>
                 <Column field="vin" header="Vin"></Column>
@@ -122,4 +122,12 @@ export default {
         'DataTableSubMenu': DataTableSubMenu
     }
 }
-</script>
\ No newline at end of file
+</script>
+
+<style lang="scss" scoped>
+.table-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+</style>
\ No newline at end of file