If you're viewing this on a tablet browser, the dimensions are set relative to the viewport width and height. Let's assume a landscape orientation for simplicity.
Inside a fullscreen container, there are two divs positioned absolutely, just like in the image provided:
The red div should always be a square, filling the screen with a height of 100% and a width of "100vh" which is equivalent to 100% of the viewport height.
As for the green div, I want it to cover the remaining width.
I'm curious if it's feasible to determine the remaining width for the green div using only CSS. Feel free to use properties like top, left, bottom, right, width, height, ::before, or ::after, but remember that the div must remain absolutely positioned (no floating elements).
.red {
height: 100%;
width: 100vh;
position: absolute;
top: 0;
left: 0;
}
.green {
height: 100%;
width: /* The solution goes here */;
position: absolute;
top: 0;
right: 0;
}