To expand the card, you can use the "cardMaxWidth" setting in "theme", which takes a number for the pixels. If you set it to a higher number, the card can be wider.
For everything else, you might want to use a custom "html_template"? You can style it inline, or use the "global_css" for it. Here’s a simple example – imagine your task data looks like this:
{"html_report": "<strong>Some HTML here</strong>", "output": "Suggested output here"}
Your template could then look like this:
<div style="display: grid; grid-template-columns: 1fr 1fr; grid-gap: 2rem">
<div style="font-family: monospace; white-space: pre-wrap; border-right: 1px solid #ccc">{{html_report}}</div>
<div>{{output}}</div>
</div>
I’ve used CSS grid here for the split window, because the markup is super straightforward – just note that it’ll require a relatively modern browser to work. You might also want to tweak the paddings and formatting, or set a fixed height and overflow: auto on the children to make them scrollable.
Quick mockup of what it would look like (obviously, the variables would be replaced with your content):
