diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form.component.html
index 2a18565178..4c1ea2dd96 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form.component.html
@@ -3,6 +3,7 @@
                                    [group]="formGroup"
                                    [hasErrorMessaging]="model.hasErrorMessages"
                                    [hidden]="model.hidden"
+                                   [class.d-none]="model.hidden"
                                    [layout]="formLayout"
                                    [model]="model"
                                    [templates]="templates"
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.html
index 29df7a34c4..d518d59da2 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.html
@@ -17,8 +17,8 @@
              [cdkDragPreviewClass]="'ds-submission-reorder-dragging'"
              [class.grey-background]="model.isInlineGroupArray">
           <!-- Item content -->
-          <div class="drag-handle" [class.invisible]="dragDisabled" tabindex="0">
-            <i class="drag-icon fas fa-grip-vertical fa-fw"  ></i>
+          <div class="drag-handle" [class.drag-disable]="dragDisabled" tabindex="0">
+            <i class="drag-icon fas fa-grip-vertical fa-fw" [class.drag-disable]="dragDisabled" ></i>
           </div>
           <ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: groupModel"></ng-container>
           <ds-dynamic-form-control-container *ngFor="let _model of groupModel.group"
@@ -28,6 +28,7 @@
                                              [context]="groupModel"
                                              [group]="control.get([idx])"
                                              [hidden]="_model.hidden"
+                                             [class.d-none]="_model.hidden"
                                              [layout]="formLayout"
                                              [model]="_model"
                                              [templates]="templates"
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/form-group/dynamic-form-group.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/form-group/dynamic-form-group.component.html
index 933590b459..8e1645633e 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/form-group/dynamic-form-group.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/form-group/dynamic-form-group.component.html
@@ -11,6 +11,7 @@
                                        [group]="control"
                                        [hasErrorMessaging]="model.hasErrorMessages"
                                        [hidden]="_model.hidden"
+                                        [class.d-none]="_model.hidden"
                                        [layout]="formLayout"
                                        [model]="_model"
                                        [templates]="templates"
diff --git a/src/styles/_global-styles.scss b/src/styles/_global-styles.scss
index 4afd2eb05e..4a855a635e 100644
--- a/src/styles/_global-styles.scss
+++ b/src/styles/_global-styles.scss
@@ -108,3 +108,10 @@ ngb-modal-backdrop {
 .ml-gap {
   margin-left: var(--ds-gap);
 }
+
+ds-dynamic-form-control-container.d-none {
+  /* Ensures that form-control containers hidden and disabled by type binding collapse and let other fields in
+     the same row expand accordingly
+   */
+  visibility: collapse;
+}