diff --git a/demo-shell-ng2/app/components/tag/tag.component.ts b/demo-shell-ng2/app/components/tag/tag.component.ts
index 7132385053..161c00dfb6 100644
--- a/demo-shell-ng2/app/components/tag/tag.component.ts
+++ b/demo-shell-ng2/app/components/tag/tag.component.ts
@@ -26,7 +26,7 @@ import { Component } from '@angular/core';
               <div class="mdl-cell mdl-cell--4-col"><alfresco-tag-node-actions-list [nodeId]="nodeId"></alfresco-tag-node-actions-list></div>
               <div class="mdl-cell mdl-cell--4-col">List Tags Content Services <alfresco-tag-list></alfresco-tag-list></div>
               <div class="mdl-cell mdl-cell--4-col">
-                    Tag list By Node ID 
+                    Tag list By Node ID
                     <alfresco-tag-node-list [nodeId]="nodeId"></alfresco-tag-node-list>
               </div>
             </div>
diff --git a/ng2-components/ng2-alfresco-tag/src/components/tag-actions.component.css b/ng2-components/ng2-alfresco-tag/src/components/tag-actions.component.css
index 02bb5dc60a..4ac32a3b42 100644
--- a/ng2-components/ng2-alfresco-tag/src/components/tag-actions.component.css
+++ b/ng2-components/ng2-alfresco-tag/src/components/tag-actions.component.css
@@ -1,27 +1,7 @@
-.tag-container {
-    width: 300px;
-}
-
 .tag-element {
     padding: 0px 0px 0px 9px!important;
 }
 
-.tag-input {
-    margin-right: 11px;
-    float: left;
-}
-
-.tag-container-input{
-    padding-top: 11px;
-    width: 190px;
-    float: left;
-    margin-right: 15px;
-}
-
-.tag-button{
-    float:left
-}
-
-.mdl-textfield__error {
-    visibility: visible !important;
+.adf-full-width {
+    width: 100%;
 }
diff --git a/ng2-components/ng2-alfresco-tag/src/components/tag-actions.component.html b/ng2-components/ng2-alfresco-tag/src/components/tag-actions.component.html
index 3a00de8794..bd6b0b6062 100644
--- a/ng2-components/ng2-alfresco-tag/src/components/tag-actions.component.html
+++ b/ng2-components/ng2-alfresco-tag/src/components/tag-actions.component.html
@@ -10,12 +10,26 @@
     </li>
     <li>
         <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-            <input class="mdl-textfield__input tag-input" type="text" id="new-tag-text" (keypress)="cleanErrorMsg()" [(ngModel)]="newTagName"/>
-            <label class="mdl-textfield__label" for="new-tag-text" > {{'TAG.LABEL.NEWTAG' | translate }}</label>
-            <span class="mdl-textfield__error">{{errorMsg}}</span>
-            <button id="add-tag" class="mdl-button mdl-js-button mdl-button--raised button" (click)="addTag()" [disabled]="disableAddTag">
-                {{'TAG.BUTTON.ADD' | translate }}
-            </button>
+            <table class="adf-full-width" cellspacing="0">
+                <tr>
+                    <td>
+                        <md-input-container class="adf-full-width">
+                            <input md-input placeholder="{{'TAG.LABEL.NEWTAG' | translate }}"
+                                   type="text"
+                                   class="mdl-textfield__input"
+                                   (keypress)="cleanErrorMsg()"
+                                   [(ngModel)]="newTagName"
+                                   id="new-tag-text"/>
+                            <md-hint *ngIf="error" [ngStyle]="{'color': 'red'}" align="start">{{errorMsg}}</md-hint>
+                        </md-input-container>
+                    </td>
+                    <td>
+                        <button  class="adf-full-width" id="add-tag" (click)="addTag()" [disabled]="disableAddTag" md-raised-button>
+                            {{'TAG.BUTTON.ADD' | translate }}
+                        </button>
+                    </td>
+                </tr>
+            </table>
         </div>
     </li>
 </div>
@@ -29,13 +43,25 @@
         </div>
     </li>
     <li>
-        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-            <input class="mdl-textfield__input tag-input" type="text" id="new-tag-text" (keypress)="cleanErrorMsg()" [(ngModel)]="newTagName"/>
-            <label class="mdl-textfield__label" for="new-tag-text" > {{'TAG.LABEL.NEWTAG' | translate }}</label>
-            <span  *ngIf="errorMsg" class="mdl-textfield__error">{{errorMsg}}</span>
-            <button id="add-tag" class="mdl-button mdl-js-button mdl-button--raised button" (click)="addTag()" [disabled]="disableAddTag">
-                {{'TAG.BUTTON.ADD' | translate }}
-            </button>
-        </div>
+        <table class="adf-full-width" cellspacing="0">
+            <tr>
+                <td>
+                    <md-input-container class="adf-full-width">
+                        <input md-input placeholder="{{'TAG.LABEL.NEWTAG' | translate }}"
+                               type="text"
+                               class="mdl-textfield__input"
+                               (keypress)="cleanErrorMsg()"
+                               [(ngModel)]="newTagName"
+                               id="new-tag-text"/>
+                        <md-hint *ngIf="error" [ngStyle]="{'color': 'red'}" align="start">{{errorMsg}}</md-hint>
+                    </md-input-container>
+                </td>
+                <td>
+                    <button  class="adf-full-width" id="add-tag" (click)="addTag()" [disabled]="disableAddTag" md-raised-button>
+                        {{'TAG.BUTTON.ADD' | translate }}
+                    </button>
+                </td>
+            </tr>
+        </table>
     </li>
 </ul>