diff --git a/frappe/public/js/frappe/form/grid_row.js b/frappe/public/js/frappe/form/grid_row.js
index 348bd13840..616c794936 100644
--- a/frappe/public/js/frappe/form/grid_row.js
+++ b/frappe/public/js/frappe/form/grid_row.js
@@ -1033,7 +1033,7 @@ export default class GridRow {
 		let is_focused = false;
 
 		var $col = $(
-			`<div class="col grid-static-col col-xs-${colsize} ${add_class}" style="${add_style}"></div>`
+			`<div class="col grid-static-col flex col-xs-${colsize} ${add_class}" style="${add_style}"></div>`
 		)
 			.attr("data-fieldname", df.fieldname)
 			.attr("data-fieldtype", df.fieldtype)
@@ -1095,7 +1095,9 @@ export default class GridRow {
 				return out;
 			});
 
-		$col.field_area = $('<div class="field-area"></div>').appendTo($col).toggle(false);
+		$col.field_area = $('<div class="field-area flex flex-grow-1"></div>')
+			.appendTo($col)
+			.toggle(false);
 		$col.static_area = $('<div class="static-area ellipsis"></div>').appendTo($col).html(txt);
 
 		// set title attribute to see full label for columns in the heading row
diff --git a/frappe/public/scss/common/grid.scss b/frappe/public/scss/common/grid.scss
index 00a967a46e..5b91d77d2b 100644
--- a/frappe/public/scss/common/grid.scss
+++ b/frappe/public/scss/common/grid.scss
@@ -309,8 +309,8 @@
 			border-radius: 0px;
 			border: 0px;
 			padding-top: 10px;
-			padding-bottom: calc(var(--padding-md) - 3px);
-			height: auto;
+			padding-bottom: 10px;
+			height: 100%;
 		}
 
 		.link-btn {
@@ -430,6 +430,7 @@
 	.frappe-control {
 		margin-bottom: 0px !important;
 		position: relative;
+		flex-grow: 1;
 	}
 
 	.col-sm-6 {