Restyle Condition and Action Editor in SimpleTransitionEditor

src/app/editor/gamesystem-editor/transition-editor/simple-transition-editor/simple-transition-editor.component.html

@@ -40,9 +40,17 @@
         <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length">
           <div class="example-element-detail"
                [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
+            <div class="condition-action-container">
+              <div class="action-container">
                 <app-scriptaccount-action-editor [transition]="element" [scriptAccounts]="scriptAccounts"></app-scriptaccount-action-editor>
+              </div>
+              <div class="condition-container">
                 <app-scriptaccount-condition-editor [conditions]="element.scriptAccountConditions" [scriptAccounts]="scriptAccounts"
                                                     (onCreateCondition)="onCreateCondition(element, $event)" (onDeleteCondition)="deleteCondition(element, $event)"></app-scriptaccount-condition-editor>
+              </div>
+            </div>
+
+
           </div>
         </td>
       </ng-container>

src/app/editor/gamesystem-editor/transition-editor/simple-transition-editor/simple-transition-editor.component.scss

@@ -61,3 +61,16 @@ tr.example-element-row:not(.example-expanded-row):active {
 .mat-error {
   color: red;
 }
+
+.condition-action-container {
+  display: flex;
+  width: 100%
+}
+
+.condition-container {
+  width: 45%;
+}
+
+.action-container {
+  width: 45%;
+}