diff --git a/src/sql/azdata.d.ts b/src/sql/azdata.d.ts
index 35ade8d0ea..95a0d1b07b 100644
--- a/src/sql/azdata.d.ts
+++ b/src/sql/azdata.d.ts
@@ -2619,6 +2619,12 @@ declare module 'azdata' {
 		updateCssStyles(cssStyles: { [key: string]: string }): Thenable<void>;
 
 		enabled: boolean;
+
+		/**
+		 * Corresponds to the display CSS property for the element
+		 */
+		display: DisplayType;
+
 		/**
 		 * Event fired to notify that the component's validity has changed
 		 */
@@ -2721,12 +2727,34 @@ declare module 'azdata' {
 
 	}
 
+	/**
+	 * Valid values for the align-items CSS property
+	 */
 	export type AlignItemsType = 'normal' | 'stretch' | 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center' | 'inherit' | 'initial' | 'unset';
+	/**
+	 * Valid values for the justify-content CSS property
+	 */
 	export type JustifyContentType = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'initial' | 'inherit';
+	/**
+	 * Valid values for the align-content CSS property
+	 */
 	export type AlignContentType = 'stretch' | 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around' | 'initial' | 'inherit';
+	/**
+	 * Valid values for flex-wrap CSS property
+	 */
 	export type FlexWrapType = 'nowrap' | 'wrap' | 'wrap-reverse';
+	/**
+	 * Valid values for the text-align CSS property
+	 */
 	export type TextAlignType = 'left' | 'right' | 'center' | 'justify' | 'initial' | 'inherit';
+	/**
+	 * Valid values for the position CSS property
+	 */
 	export type PositionType = 'static' | 'absolute' | 'fixed' | 'relative' | 'sticky' | 'initial' | 'inherit';
+	/**
+	 * Valid values for the display CSS property
+	 */
+	export type DisplayType = 'inline' | 'block' | 'contents' | 'flex' | 'grid' | 'inline-block' | 'inline-flex' | 'inline-grid' | 'inline-table' | 'list-item' | 'run-in' | 'table' | 'table-caption' | ' table-column-group' | 'table-header-group' | 'table-footer-group' | 'table-row-group' | 'table-cell' | 'table-column' | 'table-row' | 'none' | 'initial' | 'inherit' | '';
 
 	/**
 	 * The config for a FlexBox-based container. This supports easy
diff --git a/src/sql/sqlops.proposed.d.ts b/src/sql/sqlops.proposed.d.ts
index 542f5ba51b..312473171b 100644
--- a/src/sql/sqlops.proposed.d.ts
+++ b/src/sql/sqlops.proposed.d.ts
@@ -169,6 +169,12 @@ declare module 'sqlops' {
 		updateCssStyles(cssStyles: { [key: string]: string }): Thenable<void>;
 
 		enabled: boolean;
+
+		/**
+		 * Corresponds to the display CSS property for the element
+		 */
+		display: DisplayType;
+
 		/**
 		 * Event fired to notify that the component's validity has changed
 		 */
@@ -270,12 +276,34 @@ declare module 'sqlops' {
 
 	}
 
+	/**
+	 * Valid values for the align-items CSS property
+	 */
 	export type AlignItemsType = 'normal' | 'stretch' | 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center' | 'inherit' | 'initial' | 'unset';
+	/**
+	 * Valid values for the justify-content CSS property
+	 */
 	export type JustifyContentType = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'initial' | 'inherit';
+	/**
+	 * Valid values for the align-content CSS property
+	 */
 	export type AlignContentType = 'stretch' | 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around' | 'initial' | 'inherit';
+	/**
+	 * Valid values for flex-wrap CSS property
+	 */
 	export type FlexWrapType = 'nowrap' | 'wrap' | 'wrap-reverse';
+	/**
+	 * Valid values for the text-align CSS property
+	 */
 	export type TextAlignType = 'left' | 'right' | 'center' | 'justify' | 'initial' | 'inherit';
+	/**
+	 * Valid values for the position CSS property
+	 */
 	export type PositionType = 'static' | 'absolute' | 'fixed' | 'relative' | 'sticky' | 'initial' | 'inherit';
+	/**
+	 * Valid values for the display CSS property
+	 */
+	export type DisplayType = 'inline' | 'block' | 'contents' | 'flex' | 'grid' | 'inline-block' | 'inline-flex' | 'inline-grid' | 'inline-table' | 'list-item' | 'run-in' | 'table' | 'table-caption' | ' table-column-group' | 'table-header-group' | 'table-footer-group' | 'table-row-group' | 'table-cell' | 'table-column' | 'table-row' | 'none' | 'initial' | 'inherit' | '';
 
 	/**
 	 * The config for a FlexBox-based container. This supports easy
diff --git a/src/sql/workbench/api/common/extHostModelView.ts b/src/sql/workbench/api/common/extHostModelView.ts
index 4d2258e49d..b062ccda1b 100644
--- a/src/sql/workbench/api/common/extHostModelView.ts
+++ b/src/sql/workbench/api/common/extHostModelView.ts
@@ -539,6 +539,13 @@ class ComponentWrapper implements azdata.Component {
 		this.setProperty('required', v);
 	}
 
+	public get display(): azdata.DisplayType {
+		return this.properties['display'];
+	}
+	public set display(v: azdata.DisplayType) {
+		this.setProperty('display', v);
+	}
+
 	public get CSSStyles(): { [key: string]: string } {
 		return this.properties['CSSStyles'];
 	}
diff --git a/src/sql/workbench/browser/modelComponents/componentBase.ts b/src/sql/workbench/browser/modelComponents/componentBase.ts
index 9aac5484cb..9a598a0b61 100644
--- a/src/sql/workbench/browser/modelComponents/componentBase.ts
+++ b/src/sql/workbench/browser/modelComponents/componentBase.ts
@@ -164,6 +164,14 @@ export abstract class ComponentBase extends Disposable implements IComponent, On
 		this.setPropertyFromUI<azdata.ComponentProperties, string>((properties, position) => { properties.position = position; }, newValue);
 	}
 
+	public get display(): azdata.DisplayType {
+		return this.getPropertyOrDefault<azdata.ComponentProperties, azdata.DisplayType>((props) => props.display, undefined);
+	}
+
+	public set display(newValue: azdata.DisplayType) {
+		this.setPropertyFromUI<azdata.ComponentProperties, string>((properties, display) => { properties.display = display; }, newValue);
+	}
+
 	public get CSSStyles(): { [key: string]: string } {
 		return this.getPropertyOrDefault<azdata.ComponentProperties, { [key: string]: string }>((props) => props.CSSStyles, {});
 	}
diff --git a/src/sql/workbench/browser/modelComponents/flexContainer.component.ts b/src/sql/workbench/browser/modelComponents/flexContainer.component.ts
index 38a4be434d..973179a142 100644
--- a/src/sql/workbench/browser/modelComponents/flexContainer.component.ts
+++ b/src/sql/workbench/browser/modelComponents/flexContainer.component.ts
@@ -20,7 +20,7 @@ export class FlexItem {
 
 @Component({
 	template: `
-		<div *ngIf="items" class="flexContainer" [style.flexFlow]="flexFlow" [style.justifyContent]="justifyContent" [style.position]="position"
+		<div *ngIf="items" class="flexContainer" [style.display]="display" [style.flexFlow]="flexFlow" [style.justifyContent]="justifyContent" [style.position]="position"
 				[style.alignItems]="alignItems" [style.alignContent]="alignContent" [style.height]="height" [style.width]="width" [style.flex-wrap]="flexWrap">
 			<div *ngFor="let item of items" [style.flex]="getItemFlex(item)" [style.textAlign]="textAlign" [style.order]="getItemOrder(item)" [ngStyle]="getItemStyles(item)">
 				<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore">
diff --git a/src/sql/workbench/browser/modelComponents/text.component.ts b/src/sql/workbench/browser/modelComponents/text.component.ts
index f514ca39eb..5f24210f6a 100644
--- a/src/sql/workbench/browser/modelComponents/text.component.ts
+++ b/src/sql/workbench/browser/modelComponents/text.component.ts
@@ -18,15 +18,15 @@ import { TitledComponent } from 'sql/workbench/browser/modelComponents/titledCom
 @Component({
 	selector: 'modelview-text',
 	template: `
-		<div *ngIf="showDiv;else noDiv" style="display:flex;flex-flow:row;align-items:center;" [style.width]="getWidth()">
-		<p [innerHTML]="getValue()" [title]="title" [ngStyle]="this.CSSStyles" (click)="onClick()"></p>
+	<div *ngIf="showDiv;else noDiv" style="display:flex;flex-flow:row;align-items:center;" [style.width]="getWidth()">
+		<p [innerHTML]="getValue()" [style.width]="getWidth()" [style.height]="getHeight()" [title]="title" [ngStyle]="this.CSSStyles" (click)="onClick()"></p>
 		<p  *ngIf="requiredIndicator" style="color:red;margin-left:5px;">*</p>
 		<div *ngIf="description" tabindex="0" class="modelview-text-tooltip" [attr.aria-label]="description">
 			<div class="modelview-text-tooltip-content" [innerHTML]="description"></div>
 		</div>
 	</div>
 	<ng-template #noDiv>
-		<p [style.width]="getWidth()" [innerHTML]="getValue()" [ngStyle]="this.CSSStyles" (click)="onClick()"></p>
+		<p [innerHTML]="getValue()" [style.display]="display" [style.width]="getWidth()" [style.height]="getHeight()" [title]="title"  [ngStyle]="this.CSSStyles" (click)="onClick()"></p>
 	</ng-template>`
 })
 export default class TextComponent extends TitledComponent implements IComponent, OnDestroy, AfterViewInit {