<p>Tiles, Cards, Panels, and Sheets all seem to be similar containers with slightly different directional organization. There isn't any official terminology so I went with this being the kind of panel you'd find in Youtube's UI, especially in the comments section and related videos.  I've added a couple buttons in the top right to demonstrate how that works, which also means this can function as a toast pattern too if you wanted.
</p>

<p>The key to this UI realizing that it's actually 3 columns, not 2 rows.  The first column has the 48x48 image, then the title/content, then the buttons.  Since the main tile component already uses a <b>flex-direction: row</b> the 48x48 image will automatically be on the left, and we only need to have CSS for the middle and right.  You should also look at this little bit:</p>

<pre>
<code class="language-css">
tile middle {
  /* ... */
  flex-shrink: 3;
}

tile right {
  flex-shrink: 0;
}
</code>
</pre>

<p>Setting <b>flex-shrink: 0</b> sets that column to not shrink (collapse) when it gets small.  Without this the buttons would go vertical when the UI is shrunk down.  I also found I had to put <b>flex-shrink: 3</b> on the middle component or it would expand as the amount of text increased.  This forces it to shrink significantly when possible while keeping the buttons on the right solid.</p>