diff --git a/frappe/public/js/frappe/form/controls/code.js b/frappe/public/js/frappe/form/controls/code.js
index bdf36b706a..6b40201001 100644
--- a/frappe/public/js/frappe/form/controls/code.js
+++ b/frappe/public/js/frappe/form/controls/code.js
@@ -10,11 +10,11 @@ frappe.ui.form.ControlCode = frappe.ui.form.ControlText.extend({
 			.appendTo(this.input_area);
 
 		this.expanded = false;
-		this.$expand_button = $(`<button class="margin-top btn btn-xs btn-default">${__('Expand / Collapse')}</button>`).click(() => {
+		this.$expand_button = $(`<button class="btn btn-xs btn-default">${__('Expand')}</button>`).click(() => {
 			this.expanded = !this.expanded;
 			this.refresh_height();
-		}).insertAfter(this.ace_editor_target);
-
+			this.toggle_label();
+		}).appendTo(this.$input_wrapper);
 		// styling
 		this.ace_editor_target.addClass('border rounded');
 		this.ace_editor_target.css('height', 300);
@@ -37,6 +37,11 @@ frappe.ui.form.ControlCode = frappe.ui.form.ControlText.extend({
 		this.editor.resize();
 	},
 
+	toggle_label() {
+		const button_label = this.expanded ? __('Collapse') : __('Expand');
+		this.$expand_button.text(button_label);
+	},
+
 	set_language() {
 		const language_map = {
 			'Javascript': 'ace/mode/javascript',
diff --git a/frappe/public/less/form.less b/frappe/public/less/form.less
index b72d249aab..8e43b05122 100644
--- a/frappe/public/less/form.less
+++ b/frappe/public/less/form.less
@@ -770,6 +770,7 @@ h6.uppercase, .h6.uppercase {
 
 	.help-box {
 		margin-top: 3px;
+		margin-bottom: 6px;
 	}
 
 	pre {