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.

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 flex-direction: row 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:


tile middle {
  /* ... */
  flex-shrink: 3;
}

tile right {
  flex-shrink: 0;
}

Setting flex-shrink: 0 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 flex-shrink: 3 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.