Hi everyone, I was asked to create a layout of a table next to an image. There were a few constraints: * The table declare its width * The image aspect ratio is 16 / 9 * Table and image should be aligned (table should be scrollable if content does not fit) * Both image and table should not overflow, there should not be scroll and the padding bottom should not be exceeded
Attaching a codepen with my approach which doesnt seem to work if the screen is too wide (which makes the image height too big and causes scroll) . This is a rough abstraction as I develop using angular and there are many many components (hence the nesting of html tags that might seem not required) and the image should be a drawable canvas which I will have to deal with later on.