diff --git a/src/plugins/condition/components/Condition.vue b/src/plugins/condition/components/Condition.vue
index 59e93794ea..3d93f5d9f0 100644
--- a/src/plugins/condition/components/Condition.vue
+++ b/src/plugins/condition/components/Condition.vue
@@ -21,159 +21,167 @@
 *****************************************************************************/
 
 <template>
-<div v-if="isEditing"
-     class="c-condition c-condition--edit js-condition-drag-wrapper"
+<div class="c-condition-h"
+     :class="{ 'is-drag-target': draggingOver }"
+     @dragover.prevent
+     @drop.prevent="dropCondition($event, conditionIndex)"
+     @dragenter="dragEnter($event, conditionIndex)"
+     @dragleave="dragLeave($event, conditionIndex)"
 >
-    <!-- Edit view -->
-    <div class="c-condition__header">
-        <span class="c-condition__drag-grippy c-grippy c-grippy--vertical-drag"
-              title="Drag to reorder conditions"
-              :class="[{ 'is-enabled': !condition.isDefault }, { 'hide-nice': condition.isDefault }]"
-              :draggable="!condition.isDefault"
-              @dragstart="dragStart"
-              @dragstop="dragStop"
-              @dragover.stop
-        ></span>
-
-        <span class="c-condition__disclosure c-disclosure-triangle c-tree__item__view-control is-enabled"
-              :class="{ 'c-disclosure-triangle--expanded': expanded }"
-              @click="expanded = !expanded"
-        ></span>
-
-        <span class="c-condition__name">{{ condition.configuration.name }}</span>
-        <span class="c-condition__summary">
-            <template v-if="!canEvaluateCriteria">
-                Define criteria
-            </template>
-            <span v-else>
-                <condition-description :show-label="false"
-                                       :condition="condition"
-                />
-            </span>
-        </span>
-
-        <div class="c-condition__buttons">
-            <button v-if="!condition.isDefault"
-                    class="c-click-icon c-condition__duplicate-button icon-duplicate"
-                    title="Duplicate this condition"
-                    @click="cloneCondition"
-            ></button>
-
-            <button v-if="!condition.isDefault"
-                    class="c-click-icon c-condition__delete-button icon-trash"
-                    title="Delete this condition"
-                    @click="removeCondition"
-            ></button>
-        </div>
-    </div>
-    <div v-if="expanded"
-         class="c-condition__definition c-cdef"
+    <div class="c-condition-h__drop-target"></div>
+    <div v-if="isEditing"
+         class="c-condition c-condition--edit"
     >
-        <span class="c-cdef__separator c-row-separator"></span>
-        <span class="c-cdef__label">Condition Name</span>
-        <span class="c-cdef__controls">
-            <input v-model="condition.configuration.name"
-                   class="t-condition-input__name"
-                   type="text"
-                   @blur="persist"
-            >
-        </span>
+        <!-- Edit view -->
+        <div class="c-condition__header">
+            <span class="c-condition__drag-grippy c-grippy c-grippy--vertical-drag"
+                  title="Drag to reorder conditions"
+                  :class="[{ 'is-enabled': !condition.isDefault }, { 'hide-nice': condition.isDefault }]"
+                  :draggable="!condition.isDefault"
+                  @dragstart="dragStart"
+                  @dragend="dragEnd"
+            ></span>
 
-        <span class="c-cdef__label">Output</span>
-        <span class="c-cdef__controls">
-            <span class="c-cdef__control">
-                <select v-model="selectedOutputSelection"
-                        @change="setOutputValue"
-                >
-                    <option v-for="option in outputOptions"
-                            :key="option"
-                            :value="option"
-                    >
-                        {{ initCap(option) }}
-                    </option>
-                </select>
-            </span>
-            <span class="c-cdef__control">
-                <input v-if="selectedOutputSelection === outputOptions[2]"
-                       v-model="condition.configuration.output"
-                       class="t-condition-name-input"
-                       type="text"
-                       @blur="persist"
-                >
-            </span>
-        </span>
+            <span class="c-condition__disclosure c-disclosure-triangle c-tree__item__view-control is-enabled"
+                  :class="{ 'c-disclosure-triangle--expanded': expanded }"
+                  @click="expanded = !expanded"
+            ></span>
 
-        <div v-if="!condition.isDefault"
-             class="c-cdef__match-and-criteria"
+            <span class="c-condition__name">{{ condition.configuration.name }}</span>
+            <span class="c-condition__summary">
+                <template v-if="!canEvaluateCriteria">
+                    Define criteria
+                </template>
+                <span v-else>
+                    <condition-description :show-label="false"
+                                           :condition="condition"
+                    />
+                </span>
+            </span>
+
+            <div class="c-condition__buttons">
+                <button v-if="!condition.isDefault"
+                        class="c-click-icon c-condition__duplicate-button icon-duplicate"
+                        title="Duplicate this condition"
+                        @click="cloneCondition"
+                ></button>
+
+                <button v-if="!condition.isDefault"
+                        class="c-click-icon c-condition__delete-button icon-trash"
+                        title="Delete this condition"
+                        @click="removeCondition"
+                ></button>
+            </div>
+        </div>
+        <div v-if="expanded"
+             class="c-condition__definition c-cdef"
         >
             <span class="c-cdef__separator c-row-separator"></span>
-            <span class="c-cdef__label">Match</span>
+            <span class="c-cdef__label">Condition Name</span>
             <span class="c-cdef__controls">
-                <select v-model="condition.configuration.trigger"
-                        @change="persist"
+                <input v-model="condition.configuration.name"
+                       class="t-condition-input__name"
+                       type="text"
+                       @change="persist"
                 >
-                    <option v-for="option in triggers"
-                            :key="option.value"
-                            :value="option.value"
-                    > {{ option.label }}</option>
-                </select>
             </span>
 
-            <template v-if="telemetry.length || condition.configuration.criteria.length">
-                <div v-for="(criterion, index) in condition.configuration.criteria"
-                     :key="criterion.id"
-                     class="c-cdef__criteria"
-                >
-                    <Criterion :telemetry="telemetry"
-                               :criterion="criterion"
-                               :index="index"
-                               :trigger="condition.configuration.trigger"
-                               :is-default="condition.configuration.criteria.length === 1"
-                               @persist="persist"
-                    />
-                    <div class="c-cdef__criteria__buttons">
-                        <button class="c-click-icon c-cdef__criteria-duplicate-button icon-duplicate"
-                                title="Duplicate this criteria"
-                                @click="cloneCriterion(index)"
-                        ></button>
-                        <button v-if="!(condition.configuration.criteria.length === 1)"
-                                class="c-click-icon c-cdef__criteria-duplicate-button icon-trash"
-                                title="Delete this criteria"
-                                @click="removeCriterion(index)"
-                        ></button>
-                    </div>
-                </div>
-            </template>
-            <div class="c-cdef__separator c-row-separator"></div>
-            <div class="c-cdef__controls"
-                 :disabled="!telemetry.length"
+            <span class="c-cdef__label">Output</span>
+            <span class="c-cdef__controls">
+                <span class="c-cdef__control">
+                    <select v-model="selectedOutputSelection"
+                            @change="setOutputValue"
+                    >
+                        <option v-for="option in outputOptions"
+                                :key="option"
+                                :value="option"
+                        >
+                            {{ initCap(option) }}
+                        </option>
+                    </select>
+                </span>
+                <span class="c-cdef__control">
+                    <input v-if="selectedOutputSelection === outputOptions[2]"
+                           v-model="condition.configuration.output"
+                           class="t-condition-name-input"
+                           type="text"
+                           @change="persist"
+                    >
+                </span>
+            </span>
+
+            <div v-if="!condition.isDefault"
+                 class="c-cdef__match-and-criteria"
             >
-                <button
-                    class="c-cdef__add-criteria-button c-button c-button--labeled icon-plus"
-                    @click="addCriteria"
+                <span class="c-cdef__separator c-row-separator"></span>
+                <span class="c-cdef__label">Match</span>
+                <span class="c-cdef__controls">
+                    <select v-model="condition.configuration.trigger"
+                            @change="persist"
+                    >
+                        <option v-for="option in triggers"
+                                :key="option.value"
+                                :value="option.value"
+                        > {{ option.label }}</option>
+                    </select>
+                </span>
+
+                <template v-if="telemetry.length || condition.configuration.criteria.length">
+                    <div v-for="(criterion, index) in condition.configuration.criteria"
+                         :key="criterion.id"
+                         class="c-cdef__criteria"
+                    >
+                        <Criterion :telemetry="telemetry"
+                                   :criterion="criterion"
+                                   :index="index"
+                                   :trigger="condition.configuration.trigger"
+                                   :is-default="condition.configuration.criteria.length === 1"
+                                   @persist="persist"
+                        />
+                        <div class="c-cdef__criteria__buttons">
+                            <button class="c-click-icon c-cdef__criteria-duplicate-button icon-duplicate"
+                                    title="Duplicate this criteria"
+                                    @click="cloneCriterion(index)"
+                            ></button>
+                            <button v-if="!(condition.configuration.criteria.length === 1)"
+                                    class="c-click-icon c-cdef__criteria-duplicate-button icon-trash"
+                                    title="Delete this criteria"
+                                    @click="removeCriterion(index)"
+                            ></button>
+                        </div>
+                    </div>
+                </template>
+                <div class="c-cdef__separator c-row-separator"></div>
+                <div class="c-cdef__controls"
+                     :disabled="!telemetry.length"
                 >
-                    <span class="c-button__label">Add Criteria</span>
-                </button>
+                    <button
+                        class="c-cdef__add-criteria-button c-button c-button--labeled icon-plus"
+                        @click="addCriteria"
+                    >
+                        <span class="c-button__label">Add Criteria</span>
+                    </button>
+                </div>
             </div>
         </div>
     </div>
-</div>
-<div v-else
-     class="c-condition c-condition--browse"
->
-    <!-- Browse view -->
-    <div class="c-condition__header">
-        <span class="c-condition__name">
-            {{ condition.configuration.name }}
-        </span>
-        <span class="c-condition__output">
-            Output: {{ condition.configuration.output }}
-        </span>
-    </div>
-    <div class="c-condition__summary">
-        <condition-description :show-label="false"
-                               :condition="condition"
-        />
+    <div v-else
+         class="c-condition c-condition--browse"
+    >
+        <!-- Browse view -->
+        <div class="c-condition__header">
+            <span class="c-condition__name">
+                {{ condition.configuration.name }}
+            </span>
+            <span class="c-condition__output">
+                Output: {{ condition.configuration.output }}
+            </span>
+        </div>
+        <div class="c-condition__summary">
+            <condition-description :show-label="false"
+                                   :condition="condition"
+            />
+        </div>
     </div>
 </div>
 </template>
@@ -207,6 +215,14 @@ export default {
             type: Array,
             required: true,
             default: () => []
+        },
+        isDragging: {
+            type: Boolean,
+            default: false
+        },
+        moveIndex: {
+            type: Number,
+            default: 0
         }
     },
     data() {
@@ -217,8 +233,8 @@ export default {
             selectedOutputSelection: '',
             outputOptions: ['false', 'true', 'string'],
             criterionIndex: 0,
-            selectedTelemetryName: '',
-            selectedFieldName: ''
+            draggingOver: false,
+            isDefault: this.condition.isDefault
         };
     },
     computed: {
@@ -286,11 +302,39 @@ export default {
         dragStart(e) {
             e.dataTransfer.setData('dragging', e.target); // required for FF to initiate drag
             e.dataTransfer.effectAllowed = "copyMove";
-            e.dataTransfer.setDragImage(e.target.closest('.js-condition-drag-wrapper'), 0, 0);
+            e.dataTransfer.setDragImage(e.target.closest('.c-condition-h'), 0, 0);
             this.$emit('setMoveIndex', this.conditionIndex);
         },
-        dragStop(e) {
-            e.dataTransfer.clearData();
+        dragEnd(event) {
+            this.dragStarted = false;
+            event.dataTransfer.clearData();
+            this.$emit('dragComplete');
+        },
+        dropCondition(event, targetIndex) {
+            if (!this.isDragging) { return }
+            if (targetIndex > this.moveIndex) { targetIndex-- } // for 'downward' move
+            if (this.isValidTarget(targetIndex)) {
+                this.dragElement = undefined;
+                this.draggingOver = false;
+                this.$emit('dropCondition', targetIndex);
+            }
+        },
+        dragEnter(event, targetIndex) {
+            if (!this.isDragging) { return }
+            if (targetIndex > this.moveIndex) { targetIndex-- } // for 'downward' move
+            if (this.isValidTarget(targetIndex)) {
+                this.dragElement = event.target.parentElement;
+                this.draggingOver = true;
+            }
+        },
+        dragLeave(event) {
+            if (event.target.parentElement === this.dragElement) {
+                this.draggingOver = false;
+                this.dragElement = undefined;
+            }
+        },
+        isValidTarget(targetIndex) {
+            return this.moveIndex !== targetIndex;
         },
         destroy() {
         },
diff --git a/src/plugins/condition/components/ConditionCollection.vue b/src/plugins/condition/components/ConditionCollection.vue
index f3c290c7b6..ea5f601e40 100644
--- a/src/plugins/condition/components/ConditionCollection.vue
+++ b/src/plugins/condition/components/ConditionCollection.vue
@@ -52,28 +52,24 @@
             <span class="c-cs-button__label">Add Condition</span>
         </button>
 
-        <div class="c-cs__conditions-h">
-            <div v-for="(condition, index) in conditionCollection"
-                 :key="condition.id"
-                 class="c-condition-h"
-            >
-                <div v-if="isEditing"
-                     class="c-c__drag-ghost"
-                     @drop.prevent="dropCondition"
-                     @dragenter="dragEnter"
-                     @dragleave="dragLeave"
-                     @dragover.prevent
-                ></div>
-                <Condition :condition="condition"
-                           :condition-index="index"
-                           :telemetry="telemetryObjs"
-                           :is-editing="isEditing"
-                           @updateCondition="updateCondition"
-                           @removeCondition="removeCondition"
-                           @cloneCondition="cloneCondition"
-                           @setMoveIndex="setMoveIndex"
-                />
-            </div>
+        <div class="c-cs__conditions-h"
+             :class="{ 'is-active-dragging': isDragging }"
+        >
+            <Condition v-for="(condition, index) in conditionCollection"
+                       :key="condition.id"
+                       :condition="condition"
+                       :condition-index="index"
+                       :telemetry="telemetryObjs"
+                       :is-editing="isEditing"
+                       :move-index="moveIndex"
+                       :is-dragging="isDragging"
+                       @updateCondition="updateCondition"
+                       @removeCondition="removeCondition"
+                       @cloneCondition="cloneCondition"
+                       @setMoveIndex="setMoveIndex"
+                       @dragComplete="dragComplete"
+                       @dropCondition="dropCondition"
+            />
         </div>
     </div>
 </section>
@@ -108,9 +104,10 @@ export default {
             conditionResults: {},
             conditions: [],
             telemetryObjs: [],
-            moveIndex: Number,
+            moveIndex: undefined,
             isDragging: false,
-            defaultOutput: undefined
+            defaultOutput: undefined,
+            dragCounter: 0
         };
     },
     watch: {
@@ -165,9 +162,7 @@ export default {
             this.moveIndex = index;
             this.isDragging = true;
         },
-        dropCondition(e) {
-            let targetIndex = Array.from(document.querySelectorAll('.c-c__drag-ghost')).indexOf(e.target);
-            if (targetIndex > this.moveIndex) { targetIndex-- } // for 'downward' move
+        dropCondition(targetIndex) {
             const oldIndexArr = Object.keys(this.conditionCollection);
             const move = function (arr, old_index, new_index) {
                 while (old_index < 0) {
@@ -193,20 +188,10 @@ export default {
             }
 
             this.reorder(reorderPlan);
-
-            e.target.classList.remove("dragging");
+        },
+        dragComplete() {
             this.isDragging = false;
         },
-        dragEnter(e) {
-            if (!this.isDragging) { return }
-            let targetIndex = Array.from(document.querySelectorAll('.c-c__drag-ghost')).indexOf(e.target);
-            if (targetIndex > this.moveIndex) { targetIndex-- } // for 'downward' move
-            if (this.moveIndex === targetIndex) { return }
-            e.target.classList.add("dragging");
-        },
-        dragLeave(e) {
-            e.target.classList.remove("dragging");
-        },
         addTelemetryObject(domainObject) {
             this.telemetryObjs.push(domainObject);
             this.$emit('telemetryUpdated', this.telemetryObjs);
diff --git a/src/plugins/condition/components/conditionals.scss b/src/plugins/condition/components/conditionals.scss
index 8dd1cceb2d..9592f89d8c 100644
--- a/src/plugins/condition/components/conditionals.scss
+++ b/src/plugins/condition/components/conditionals.scss
@@ -19,260 +19,129 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-
-.c-cs {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    overflow: hidden;
-
-    /************************** CONDITION SET LAYOUT */
-    &__current-output {
-        flex: 0 0 auto;
-    }
-
-    &__test-data-and-conditions-w {
-        display: flex;
-        flex-direction: column;
-        flex: 1 1 auto;
-        height: 100%;
-        overflow: hidden;
-    }
-
-    &__test-data,
-    &__conditions {
-        flex: 0 0 auto;
-        overflow: hidden;
-    }
-
-    &__test-data {
-        flex: 0 0 auto;
-        max-height: 50%;
-
-        &.is-expanded {
-            margin-bottom: $interiorMargin * 4;
-        }
-    }
-
-    &__conditions {
-        flex: 1 1 auto;
-
-        > * + * {
-            margin-top: $interiorMarginSm;
-        }
-    }
-
-    &__content {
-        display: flex;
-        flex-direction: column;
-        flex: 0 1 auto;
-        overflow: hidden;
-
-        > * {
-            flex: 0 0 auto;
-            overflow: hidden;
-            + * {
-                margin-top: $interiorMarginSm;
-            }
-        }
-
-        .c-button {
-            align-self: start;
-        }
-    }
-
-    .is-editing & {
-        // Add some space to kick away from blue editing border indication
-        padding: $interiorMargin;
-    }
-
-    section {
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-    }
-
-    &__conditions-h {
-        display: flex;
-        flex-direction: column;
-        flex: 1 1 auto;
-        overflow: auto;
-        padding-right: $interiorMarginSm;
-
-        > * + * {
-            margin-top: $interiorMarginSm;
-        }
-    }
-
-    .hint {
-        padding: $interiorMarginSm;
-    }
-
-    /************************** SPECIFIC ITEMS */
-    &__current-output-value {
-        flex-direction: row;
-        align-items: baseline;
-        padding: 0 $interiorMargin $interiorMarginLg $interiorMargin;
-
-        > * {
-            padding: $interiorMargin 0; // Must do this to align label and value
-        }
-
-        &__label {
-            color: $colorInspectorSectionHeaderFg;
-            opacity: 0.9;
-            text-transform: uppercase;
-        }
-
-        &__value {
-            $p: $interiorMargin * 3;
-            font-size: 1.25em;
-            margin-left: $interiorMargin;
-            padding-left: $p;
-            padding-right: $p;
-            background: rgba(black, 0.2);
-            border-radius: 5px;
-        }
+/***************************** DRAGGING */
+.is-active-dragging {
+    .c-condition-h__drop-target {
+        height: 3px;
+        margin-bottom: $interiorMarginSm;
     }
 }
 
-/***************************** CONDITIONS AND TEST DATUM ELEMENTS */
-.c-condition,
-.c-test-datum {
-    @include discreteItem();
-    display: flex;
-    padding: $interiorMargin;
-    line-height: 170%; // Aligns text with controls like selects
-}
+.c-condition-h {
+    &__drop-target {
+        border-radius: $controlCr;
+        height: 0;
+        min-height: 0;
+        transition: background-color, height;
+        transition-duration: 150ms;
+    }
 
-.c-cdef,
-.c-cs-test {
-    &__controls {
-        display: flex;
-        flex: 1 1 auto;
-        flex-wrap: wrap;
+    &.is-drag-target {
+        .c-condition > * {
+            pointer-events: none; // Keeps the JS drop handler from being intercepted by internal elements
+        }
 
-        > * > * {
-            margin-right: $interiorMarginSm;
+        .c-condition-h__drop-target {
+            background-color: rgba($colorKey, 0.7);
         }
     }
-
-    &__buttons {
-        white-space: nowrap;
-    }
 }
+ .c-condition,
+ .c-test-datum {
+     @include discreteItem();
+     display: flex;
+     padding: $interiorMargin;
 
-.c-condition {
-    flex-direction: column;
-    min-width: 400px;
+     &--edit {
+         line-height: 160%; // For layout when inputs wrap, like in criteria
+     }
+ }
 
-    > * + * {
-        margin-top: $interiorMarginSm;
-    }
-    &--browse {
-        .c-condition__summary {
-            border-top: 1px solid $colorInteriorBorder;
-            padding-top: $interiorMargin;
-        }
-    }
+ .c-condition {
+     flex-direction: column;
+     min-width: 400px;
 
-    /***************************** HEADER */
-    &__header {
-        $h: 22px;
-        display: flex;
-        align-items: start;
-        align-content: stretch;
-        overflow: hidden;
-        min-height: $h;
-        line-height: $h;
+     > * + * {
+         margin-top: $interiorMarginSm;
+     }
+     &--browse {
+         .c-condition__summary {
+             border-top: 1px solid $colorInteriorBorder;
+             padding-top: $interiorMargin;
+         }
+     }
 
-        > * {
-            flex: 0 0 auto;
-            + * {
-                margin-left: $interiorMarginSm;
-            }
-        }
-    }
+     /***************************** HEADER */
+     &__header {
+         $h: 22px;
+         display: flex;
+         align-items: start;
+         align-content: stretch;
+         overflow: hidden;
+         min-height: $h;
+         line-height: $h;
 
-    &__drag-grippy {
-        transform: translateY(50%);
-    }
+         > * {
+             flex: 0 0 auto;
+             + * {
+                 margin-left: $interiorMarginSm;
+             }
+         }
+     }
 
-    &__name {
-        font-weight: bold;
-        align-self: baseline; // Fixes bold line-height offset problem
-    }
+     &__drag-grippy {
+         transform: translateY(50%);
+     }
 
-    &__output,
-    &__summary {
-        flex: 1 1 auto;
-    }
-}
+     &__name {
+         font-weight: bold;
+         align-self: baseline; // Fixes bold line-height offset problem
+     }
 
-/***************************** CONDITION DEFINITION, EDITING */
-.c-cdef {
-    display: grid;
-    grid-row-gap: $interiorMarginSm;
-    grid-column-gap: $interiorMargin;
-    grid-auto-columns: min-content 1fr max-content;
-    align-items: start;
-    min-width: 150px;
-    margin-left: 29px;
-    overflow: hidden;
+     &__output,
+     &__summary {
+         flex: 1 1 auto;
+     }
+ }
 
-    &__criteria,
-    &__match-and-criteria {
-        display: contents;
-    }
+ /***************************** CONDITION DEFINITION, EDITING */
+ .c-cdef {
+     display: grid;
+     grid-row-gap: $interiorMarginSm;
+     grid-column-gap: $interiorMargin;
+     grid-auto-columns: min-content 1fr max-content;
+     align-items: start;
+     min-width: 150px;
+     margin-left: 29px;
+     overflow: hidden;
 
-    &__label {
-        grid-column: 1;
-        text-align: right;
-        white-space: nowrap;
-    }
+     &__criteria,
+     &__match-and-criteria {
+         display: contents;
+     }
 
-    &__separator {
-        grid-column: 1 / span 3;
-    }
+     &__label {
+         grid-column: 1;
+         text-align: right;
+         white-space: nowrap;
+     }
 
-    &__controls {
-        align-items: flex-start;
-        grid-column: 2;
+     &__separator {
+         grid-column: 1 / span 3;
+     }
 
-        > * > * {
-            margin-right: $interiorMarginSm;
-        }
-    }
+     &__controls {
+         display: flex;
+         flex-wrap: wrap;
+         align-items: flex-start;
+         grid-column: 2;
 
-    &__buttons {
-        grid-column: 3;
-    }
-}
+         > * > * {
+             margin-right: $interiorMarginSm;
+         }
+     }
 
-.c-c__drag-ghost {
-    width: 100%;
-    min-height: $interiorMarginSm;
-
-    &.dragging {
-        min-height: 5em;
-        background-color: lightblue;
-        border-radius: 2px;
-    }
-}
-
-/***************************** TEST DATA */
-.c-cs-tests {
-    flex: 0 1 auto;
-    overflow: auto;
-    padding-right: $interiorMarginSm;
-
-    > * + * {
-        margin-top: $interiorMarginSm;
-    }
-}
-
-.c-cs-test {
-    > * + * {
-        margin-left: $interiorMargin;
-    }
-}
+     &__buttons {
+         grid-column: 3;
+     }
+ }