How to avoid the use of nested cards

I am developing a school web app and trying to follow material design guidelines.

There's a functionality that allows teacher to create homework and in-class test models, wherein they can input a list of tags and each student who participates in the test will be shown exercises that have those tags, chosen at random, as to have each student be presented with different exercises. The feature essentially allows teachers to create a pool of exercises that satisfy the "rule" of having the tags input by them, and then have the system pick randomly from that pool to assign the exercises to students.

What I want to do is show a count of how many exercises satisfy the rule as it is built by the teacher, and present an example of an exercise that is eligible to be picked, just to give them a feel for the effect of what they're doing.

The problem I'm having is I don't really know what's the best way to have the various components share the available screen space and how to clearly separate them, signifying what is the "input" space and what's the "preview" space.

The component as a whole is interacted with inside a dialog, as it is only a small part of a bigger process (it's inside another editor of its own).

This is what it looks like:

The main thing I don't like about this is the nested cards on the right. I have a card with some slight elevation to kind of separate the preview pane from the rest of the editor, and then there's another card which contains a minimal preview of the exercise. The innermost card is necessary as it's the way I show exercises around the app. The outer card is what I feel I could probably get rid of, but I'm failing to see how I could separate the two areas of the screen without some clear-cut limit like the one a card creates.

Overall, I'm afraid this UI component as a whole has ended up looking too cluttered and without enough separation between the logical units inside of it.

What can I do to improve it? Many thanks.