I’m trying to get my program to match the resulting image of another program. although when using “display:flex”, I haven’t found how to move my rectangle/square to one side of the page (the left specifically), along the Y-axis and diagonally without adjusting the margin or border! I seem to know the coding elements or statements required to do so but I think something is off in my code. I’d greatly appreciate the help in solving this from some righteous and kind soul!

In the included images mine is the one where the green bar is atop the square, but the red box is to the left…the one that isn’t compact with each object having its own space and having very little gray from the box show.

I’d greatly appreciate the help with solving this from some righteous and kind soul! <3

What it should look like: (https://i.sstatic.net/XIU9fB5c.png)
What it looks like: (https://i.sstatic.net/0b8j0c5C.png)

I tried adjusting the boxes without display:flex and got the red box to the right, the green bar aligned on each side but not the top and the blue rectangle sized properly. When I used display:flex all the objects are stuck to the top of the page next to another (green on the left, blue in the middle and red box to the right) and I haven’t found a way to move them; I’ve tried using “align-items” and “vertical-align” but the objects were still at the top.