diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
index 4940df18ba..2653842e6d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
@@ -34,7 +34,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle">
         {{ 'widgets.liquid-level-card.title' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="tb-flex-centered-row flex-start">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
           <input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -49,7 +49,7 @@
       <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitleIcon">
         {{ 'widgets.liquid-level-card.icon' | translate }}
       </mat-slide-toggle>
-      <div fxFlex fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
+      <div class="tb-flex-centered-row flex-end">
         <mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic">
           <input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>
@@ -64,7 +64,7 @@
       </div>
     </div>
     <div fxFlex fxLayout="column" class="tb-form-row space-between">
-      <div fxFlex fxLayout="row" style="width: 100%;" fxLayoutAlign="space-between center">
+      <div class="tb-flex-centered-row space-between no-gap fill-width">
         <div class="fixed-title-width"  translate>widgets.liquid-level-card.shape</div>
         <tb-toggle-select formControlName="tankSelectionType">
           <tb-toggle-option *ngFor="let type of DataSourceTypes" [value]="type">
@@ -96,7 +96,7 @@
                                   formControlName="shapeAttributeName">
           </tb-string-autocomplete>
         </div>
-        <div fxFlex fxLayout="row" fxLayoutAlign="space-between center" style="width: 100%;">
+        <div class="tb-flex-centered-row space-between no-gap fill-width">
           <div class="tb-hint" style="padding: 0;" translate>widgets.liquid-level-card.shape-by-attribute</div>
           <div class="see-example"
                [tb-help-popup]="'widget/lib/indicator/shape_attribute_fn'"
@@ -123,16 +123,16 @@
     <div class="tb-form-panel-title" translate>widgets.liquid-level-card.units</div>
     <div class="tb-form-row space-between">
       <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.datasource-units</div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="end center">
+      <div class="tb-flex-centered-row flex-end no-gap">
         <tb-unit-input required style="max-width: 25%;" class="flex"
                        [tagFilter]="unitsType.capacity"
                        formControlName="datasourceUnits">
         </tb-unit-input>
       </div>
     </div>
-    <div class="tb-form-row space-between" *ngIf="levelCardWidgetConfigForm.get('layout').value === LevelCardLayout.absolute">
+    <div class="tb-form-row space-between column-xs" *ngIf="levelCardWidgetConfigForm.get('layout').value === LevelCardLayout.absolute">
       <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.widget-units</div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="tb-flex-centered-row flex-start">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
           <mat-select formControlName="widgetUnitsSource" placeholder="{{ 'widget-config.set' | translate }}">
             <mat-option *ngFor="let type of DataSourceTypes" [value]="type">
@@ -154,9 +154,9 @@
         </ng-template>
       </div>
     </div>
-    <div class="tb-form-row" [fxShow]="volumeInput">
+    <div class="tb-form-row column-xs" [fxShow]="volumeInput">
       <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.total-volume</div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="tb-flex-centered-row flex-start">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
           <mat-select formControlName="volumeSource" placeholder="{{ 'widget-config.set' | translate }}">
             <mat-option *ngFor="let type of DataSourceTypes" [value]="type">
@@ -186,9 +186,9 @@
         </ng-template>
       </div>
     </div>
-    <div class="tb-form-row space-between" [fxShow]="volumeInput">
+    <div class="tb-form-row space-between column-xs" [fxShow]="volumeInput">
       <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.total-volume-units</div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <div class="tb-flex-centered-row flex-start">
         <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
           <mat-select formControlName="volumeUnitsSource" placeholder="{{ 'widget-config.set' | translate }}">
             <mat-option *ngFor="let type of DataSourceTypes" [value]="type">
@@ -226,7 +226,7 @@
     <div class="tb-form-row space-between"
          *ngIf="levelCardWidgetConfigForm.get('layout').value !== LevelCardLayout.simple">
       <div class="fixed-title-width" translate>widgets.liquid-level-card.value</div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
+      <div class="tb-flex-centered-row flex-end">
         <mat-form-field style="max-width: 40%;" appearance="outline" class="flex number" subscriptSizing="dynamic">
           <input matInput formControlName="decimals" type="number"
                  min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
@@ -241,7 +241,7 @@
     </div>
     <div class="tb-form-row" *ngIf="levelCardWidgetConfigForm.get('layout').value === LevelCardLayout.absolute">
       <div class="fixed-title-width" translate>widgets.liquid-level-card.total-volume</div>
-      <div fxFlex fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
+      <div class="tb-flex-centered-row flex-end">
         <tb-font-settings formControlName="volumeFont"
                           [previewText]="totalVolumeValuePreviewFn">
         </tb-font-settings>
@@ -267,7 +267,7 @@
           <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTooltipLevel">
             {{ 'widgets.liquid-level-card.level' | translate }}
           </mat-slide-toggle>
-          <div fxFlex fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
+          <div class="tb-flex-centered-row flex-end">
             <tb-unit-input required class="flex"
                            [tagFilter]="unitsType.capacity"
                            formControlName="tooltipUnits">
@@ -288,7 +288,7 @@
           <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTooltipDate">
             {{ 'widgets.value-card.date' | translate }}
           </mat-slide-toggle>
-          <div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+          <div class="tb-flex-centered-row flex-start">
             <tb-date-format-select fxFlex formControlName="tooltipDateFormat"></tb-date-format-select>
             <tb-font-settings formControlName="tooltipDateFont"
                               [previewText]="datePreviewFn">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html
index d549198273..6e3967c67d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html
@@ -19,7 +19,7 @@
   <div class="tb-form-panel no-padding no-border">
     <div class="tb-form-panel">
       <div fxFlex fxLayout="column" class="tb-form-row space-between">
-        <div fxFlex fxLayout="row" style="width: 100%;" fxLayoutAlign="space-between center">
+        <div class="tb-flex-centered-row space-between no-gap fill-width">
           <div class="fixed-title-width"  translate>widgets.liquid-level-card.shape</div>
           <tb-toggle-select formControlName="tankSelectionType">
             <tb-toggle-option *ngFor="let type of DataSourceTypes" [value]="type">
@@ -51,7 +51,7 @@
                                     formControlName="shapeAttributeName">
             </tb-string-autocomplete>
           </div>
-          <div fxFlex fxLayout="row" fxLayoutAlign="space-between center" style="width: 100%;">
+          <div class="tb-flex-centered-row space-between no-gap fill-width">
             <div class="tb-hint" style="padding: 0;" translate>widgets.liquid-level-card.shape-by-attribute</div>
             <div class="see-example"
                  [tb-help-popup]="'widget/lib/indicator/shape_attribute_fn'"
@@ -87,9 +87,9 @@
                        formControlName="datasourceUnits">
         </tb-unit-input>
       </div>
-      <div class="tb-form-row space-between" *ngIf="levelCardWidgetSettingsForm.get('layout').value === LevelCardLayout.absolute">
+      <div class="tb-form-row space-between column-xs" *ngIf="levelCardWidgetSettingsForm.get('layout').value === LevelCardLayout.absolute">
         <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.widget-units</div>
-        <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="tb-flex-centered-row flex-start">
           <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
             <mat-select formControlName="widgetUnitsSource" placeholder="{{ 'widget-config.set' | translate }}">
               <mat-option *ngFor="let type of DataSourceTypes" [value]="type">
@@ -111,9 +111,9 @@
           </ng-template>
         </div>
       </div>
-      <div class="tb-form-row" *ngIf="volumeInput">
+      <div class="tb-form-row column-xs" *ngIf="volumeInput">
         <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.total-volume</div>
-        <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="tb-flex-centered-row flex-start">
           <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
             <mat-select formControlName="volumeSource" placeholder="{{ 'widget-config.set' | translate }}">
               <mat-option *ngFor="let type of DataSourceTypes" [value]="type">
@@ -143,9 +143,9 @@
           </ng-template>
         </div>
       </div>
-      <div class="tb-form-row space-between" [fxShow]="volumeInput">
+      <div class="tb-form-row space-between column-xs" [fxShow]="volumeInput">
         <div class="fixed-title-width tb-required" translate>widgets.liquid-level-card.total-volume-units</div>
-        <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+        <div class="tb-flex-centered-row flex-start">
           <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic" style="max-width: 25%">
             <mat-select formControlName="volumeUnitsSource" placeholder="{{ 'widget-config.set' | translate }}">
               <mat-option *ngFor="let type of DataSourceTypes" [value]="type">
@@ -188,7 +188,7 @@
       <div class="tb-form-row space-between"
            *ngIf="levelCardWidgetSettingsForm.get('layout').value !== LevelCardLayout.simple">
         <div class="fixed-title-width" translate>widgets.liquid-level-card.value</div>
-        <div fxFlex fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
+        <div class="tb-flex-centered-row flex-end">
           <tb-font-settings formControlName="valueFont"
                             [previewText]="valuePreviewFn">
           </tb-font-settings>
@@ -198,7 +198,7 @@
       </div>
       <div class="tb-form-row" *ngIf="levelCardWidgetSettingsForm.get('layout').value === LevelCardLayout.absolute">
         <div class="fixed-title-width" translate>widgets.liquid-level-card.total-volume</div>
-        <div fxFlex fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
+        <div class="tb-flex-centered-row flex-end">
           <tb-font-settings formControlName="volumeFont"
                             [previewText]="totalVolumeValuePreviewFn">
           </tb-font-settings>
@@ -232,7 +232,7 @@
             <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTooltipLevel">
               {{ 'widgets.liquid-level-card.level' | translate }}
             </mat-slide-toggle>
-            <div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="tb-flex-centered-row flex-start">
               <tb-unit-input [tagFilter]="unitsType.capacity"
                              required class="flex" formControlName="tooltipUnits">
               </tb-unit-input>
@@ -252,7 +252,7 @@
             <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTooltipDate">
               {{ 'widgets.value-card.date' | translate }}
             </mat-slide-toggle>
-            <div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+            <div class="tb-flex-centered-row flex-start">
               <tb-date-format-select fxFlex formControlName="tooltipDateFormat"></tb-date-format-select>
               <tb-font-settings formControlName="tooltipDateFont"
                                 [previewText]="datePreviewFn">
diff --git a/ui-ngx/src/form.scss b/ui-ngx/src/form.scss
index ee6d4167cd..8b857c05c8 100644
--- a/ui-ngx/src/form.scss
+++ b/ui-ngx/src/form.scss
@@ -211,6 +211,29 @@
     }
   }
 
+  .tb-flex-centered-row {
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+    &.flex-start {
+      justify-content: flex-start;
+    }
+    &.flex-end {
+      justify-content: flex-end;
+    }
+    &.space-between {
+      justify-content: space-between;
+    }
+    &.no-gap {
+      gap: 0;
+    }
+    &.fill-width {
+      width: 100%;
+    }
+  }
+
   .tb-form-panel, .tb-form-row {
     .mat-slide {
       margin: 0;