Is It Possible To Have 2 Image Blocks Fill The Top Of My Front Page?

What I want to do is, have 2 blocks side by side (without any margin between them) that should extend to cover the full width of the window.

The catch is that one of the blocks is a square image that should keep its width and height the same while the other is another block that should fill the remaining of the container.

So what i did was, create a grid with 2 grids inside.

The main grid has the following css attributes:

max-width: none;
padding-left: 0;
padding-right: 0;

This works relatively well, however the problem is with the inner grids.

If i simply set something like, left grid span13 and right grid span3 it won't work because the right grid should keep a constant width and height (while resizing) and the left grid should keep a constant height but its width should adjust to fill the space that the right grid didn't occupy.

To expand this, past a certain width and to make this responsive the main block should start to scale down instead of changing the inner block sizes.

Is this even possible with the blocks and layout editor? or am i better off adding this as a template outside the span-grid behavior code.