diff --git a/extensions/sql-database-projects/src/dialogs/publishDatabaseDialog.ts b/extensions/sql-database-projects/src/dialogs/publishDatabaseDialog.ts
index 3f69b3c866..a0927898d9 100644
--- a/extensions/sql-database-projects/src/dialogs/publishDatabaseDialog.ts
+++ b/extensions/sql-database-projects/src/dialogs/publishDatabaseDialog.ts
@@ -368,7 +368,8 @@ export class PublishDatabaseDialog {
 
 	private createPublishTypeRadioButtons(view: azdataType.ModelView): azdataType.Component {
 		const publishToLabel = view.modelBuilder.text().withProps({
-			value: constants.publishTo
+			value: constants.publishTo,
+			width: cssStyles.publishDialogLabelWidth
 		}).component();
 		this.existingServerRadioButton = view.modelBuilder.radioButton()
 			.withProps({
@@ -391,12 +392,17 @@ export class PublishDatabaseDialog {
 			this.onPublishTypeChange(!checked, view);
 		});
 
-		let flexRadioButtonsModel: azdataType.FlexContainer = view.modelBuilder.flexContainer()
+		const radioButtonContainer = view.modelBuilder.flexContainer()
 			.withLayout({ flexFlow: 'column' })
-			.withItems([publishToLabel, this.existingServerRadioButton, this.dockerServerRadioButton])
+			.withItems([this.existingServerRadioButton, this.dockerServerRadioButton])
 			.withProps({ ariaRole: 'radiogroup' })
 			.component();
 
+		let flexRadioButtonsModel: azdataType.FlexContainer = view.modelBuilder.flexContainer()
+			.withLayout({ flexFlow: 'row', alignItems: 'baseline' })
+			.withItems([publishToLabel, radioButtonContainer], { CSSStyles: { flex: '0 0 auto', 'margin-right': '10px' } })
+			.component();
+
 		return flexRadioButtonsModel;
 	}