Fix zone sizing in Studio - was inconsistent when resizing window

drag_and_drop_v2/public/css/drag_and_drop_edit.css

@@ -35,6 +35,8 @@
     box-pack:center;
     box-align:center;
 
+    border: 1px dotted #666;
+    box-sizing: border-box;
 }
 
 .xblock--drag-and-drop--editor .zone p {
@@ -112,15 +114,17 @@
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: flex-start;
+  justify-content: space-between;
 }
 
 .xblock--drag-and-drop--editor .zones-tab .tab-content .controls {
-  flex-basis: 40%;
+  width: 40%;
+  max-width: 50%;
+  min-width: 330px;
   margin-right: 15px;
 }
 
 .xblock--drag-and-drop--editor .zones-tab .tab-content .target {
-  flex-basis: 60%;
   position: relative;
   border: 1px solid #ccc;
   overflow: hidden;
@@ -153,10 +157,6 @@
     margin: 0 19px 5px 0;
 }
 
-.xblock--drag-and-drop--editor .zone {
-    border: 1px dotted #666;
-}
-
 .xblock--drag-and-drop--editor .feedback-form textarea {
     width: 99%;
     height: 128px;