.#{$ns}Hbox { display: table; table-layout: fixed; border-spacing: 0; width: 100%; height: 100%; & > .#{$ns}Hbox-col { display: table-cell; vertical-align: top; height: 100%; float: none; } } .#{$ns}FormHbox { margin-left: -15px; margin-right: -15px; > .#{$ns}Hbox > .#{$ns}Hbox-col { padding-left: 15px; padding-right: 15px; vertical-align: top; > .#{$ns}Form-group { margin-left: 0; margin-right: 0; } > .#{$ns}Form-group:last-child { margin-bottom: 0; } } &.#{$ns}Hbox--xs { margin-left: -5px; margin-right: -5px; > .#{$ns}Hbox > .#{$ns}Hbox-col { padding-left: 5px; padding-right: 5px; } } &.#{$ns}Hbox--sm { margin-left: -10px; margin-right: -10px; > .#{$ns}Hbox > .#{$ns}Hbox-col { padding-left: 10px; padding-right: 10px; } } } @include media-breakpoint-down(md) { .#{$ns}Hbox--autoSm { display: block; & > .#{$ns}Hbox-col { width: auto; height: auto; display: block; &.show { display: block !important; } } & .#{$ns}Vbox { height: auto; } & .cell-inner { position: static !important; } } } @include media-breakpoint-down(sm) { .#{$ns}Hbox--autoXs { display: block; & > .#{$ns}Hbox-col { width: auto; height: auto; display: block; } & .#{$ns}Vbox { height: auto; } & .cell-inner { position: static !important; } } }