To make it easier to understand, I will use the flag of Benin as an example:
I have been attempting to achieve a similar layout using flexbox in CSS without success.
The challenge is to have each of the three regions as siblings, like this:
<div class=flag>
<div class=green></div>
<div class=yellow></div>
<div class=red></div>
</div>
.flag {
display:flex;
flex-direction: row;
}
/* Unsure about what comes next */
.green {
}
.red, .yellow {
}
Can this be achieved without adding an extra container for .red and .yellow? It can be easily done with an intermediary node, but I am curious if the desired effect can be attained as described above.