diff --git a/start-client/src/components/common/builder/Fields.js b/start-client/src/components/common/builder/Fields.js
index bf8d04d52c8..9efdacb7c93 100644
--- a/start-client/src/components/common/builder/Fields.js
+++ b/start-client/src/components/common/builder/Fields.js
@@ -109,22 +109,24 @@ function Fields({
               )}
             </Control>
             <Control text='Project Metadata'>
-              <FieldInput
-                id='input-group'
-                value={get(values, 'meta.group')}
-                text='Group'
-                onChange={event => {
-                  update({ meta: { group: event.target.value } })
-                }}
-              />
-              <FieldInput
-                id='input-artifact'
-                value={get(values, 'meta.artifact')}
-                text='Artifact'
-                onChange={event => {
-                  update({ meta: { artifact: event.target.value } })
-                }}
-              />
+              <div className="control-row">
+                <FieldInput
+                  id='input-group'
+                  value={get(values, 'meta.group')}
+                  text='Group'
+                  onChange={event => {
+                    update({ meta: { group: event.target.value } })
+                  }}
+                />
+                <FieldInput
+                  id='input-artifact'
+                  value={get(values, 'meta.artifact')}
+                  text='Artifact'
+                  onChange={event => {
+                    update({ meta: { artifact: event.target.value } })
+                  }}
+                  />
+              </div>
               <FieldInput
                 id='input-name'
                 value={get(values, 'meta.name')}
diff --git a/start-client/src/styles/_main.scss b/start-client/src/styles/_main.scss
index ddc3a398856..856da434ab6 100644
--- a/start-client/src/styles/_main.scss
+++ b/start-client/src/styles/_main.scss
@@ -302,7 +302,20 @@ hr.divider {
   input {
     color: $light-color;
     background: $light-background;
-    max-width: 520px;
+    max-width: 550px;
+  }
+}
+.control-row{
+  display: flex;
+  .control-inline{
+    max-width: 340px;
+    flex: 1 1 0;
+  }
+  .control-inline:nth-child(2) label {
+    flex: 70px 0;
+  }
+  input{
+    max-width: 250px;
   }
 }
 
@@ -572,7 +585,7 @@ button.button {
   left: 75px;
   .actions-container {
     background: $light-background-seconday;
-    padding: 20px 0.5rem;
+    padding: 18px 0.5rem;
     margin: 0 auto;
     max-width: $spring-max-width - (82 * 2);
     height: 50px;
diff --git a/start-client/src/styles/_responsive.scss b/start-client/src/styles/_responsive.scss
index 827ac116dc0..273a16bddc5 100644
--- a/start-client/src/styles/_responsive.scss
+++ b/start-client/src/styles/_responsive.scss
@@ -80,6 +80,18 @@
   .placeholder-button-download {
     width: 144.13px;
   }
+  .control-row {
+    display: block;
+    .control-inline{
+      max-width: none;
+    }
+    .control-inline:nth-child(2) label,label{
+      flex: 110px 0 ;
+    }
+    input {
+      max-width: 520px;
+    }
+  }
 }
 
 .not-mobile {
@@ -278,7 +290,7 @@
   hr.divider {
     display: none;
   }
-  .control-inline,
+  .control-inline,.control-row,
   .control-placeholder {
     display: block;
     label,
@@ -292,4 +304,7 @@
       margin-left: 0;
     }
   }
+  .control-row{
+    .control-inline{max-width: none;}
+  } 
 }