How is this possible using any CSS layout (Grid, flexbox..) - css

Question

Struggling with the follwing layout, is it possible? The html is not fixed. I've added some code to work with along with a jsbin:
https://jsbin.com/lifinogifu
Layout
<div class="container">
<div class="item">
<div class="item-image"></div>
<div class="item-name"></div>
<div class="item-meta"></div>
<div class="item-action"></div>
</div>
</div>
.item {
display: flex;
width: 100%;
background-color: #eee;
> * {
height: 100px;
border: 1px dotted #ccc;
}
&-image {
width: 100px;
}
&-name {
flex: 1;
}
&-meta,
&-action {
width: 80px;
}
}

Answer 1

Using Grid:
To create the responsive part you will need 2 columns, the first for the yellow, and the second column for all the other blocks. In the second column, you will create a grid with two lines, the first line you will put the green block, and the second line you will put another grid with the red and the blue block. So the code would look something like this:
<style>
#yellow {
background-color: yellow;
}
#green {
background-color: green;
}
#red {
background-color: red;
}
#blue {
background-color: blue;
}
#grid1 {
display: grid;
grid-template-columns: 1fr 4fr;
width: 100%;
height: 400px;
}
#grid2 {
display: grid;
grid-template-columns: 1fr;
}
#grid3 {
display: grid;
grid-template-columns: 1fr 1fr;
}
</style>
<div id="grid1">
<div id="yellow"></div>
<div id="grid2">
<div id="green"></div>
<div id="grid3">
<div id="red"></div>
<div id="blue"></div>
</div>
</div>
</div>
For the desktop part, you will have to create a media query that changes the columns of the grid to achieve the correct design. You actually can achieve this only changing the layout of the grid2 so everything will be side by side:
#grid2 {
grid-template-columns: 1fr 1fr;
}