I am looking to divide my window into two equal parts, with the same height but each taking up 50% of the width.
Here is the CSS I used:
.container {
display: flex;
height : 100%;
}
.column {
flex: 1;
height : 100%;
}
.column-one {
order: 1;
}
.column-two {
order: 2;
}
The structure of my HTML looks like this:
<div class="container">
<div class="column column-one"> Column 1
<div class="x" id="sliceX" ></div>
<div class="y" id="sliceY"></div>
<div class="z" id="sliceZ"></div>
</div>
<div class="column column-two"> Column 2
<div class="x" id="sliceX2"> </div>
<div class="y" id="sliceY2"></div>
<div class="z" id="sliceZ2"></div>
</div>
</div>
Everything seems to be working fine so far.
Now, I want my .x to take up 100% of the width and 50% of the height. The .y and .z elements should follow, each taking up 50% of the remaining height. Additionally, both .y and .z should only take up 50% of the width, with .y on the left and .z on the right.
It should look like this:
Col1 Col2
xxxx xxxx
xxxx xxxx
yyzz yyzz
yyzz yyzz
How can I adjust my css to achieve this layout within the current setup of two columns?