Responsive two column grid into one alternating rows - html

Question

I would like to create the following responsive grid structure, taking in mind that element 3 and 5 are not always present and they have variable height.:
grid image
I've tried with floating elements, but element 2 get's into the second column:
https://jsfiddle.net/a2tbbs2b/2/
CSS:
.panel{
background: white;
box-sizing: border-box;
overflow: auto;
}
.panel::after {
content: "";
clear: both;
display: table;
}
.section{
width: 60%;
float: right;
text-align: center;
}
.section.left{
float: left;
width: 40%;
}
.one{
background: green;
height: 80px;
}
.two{
background: blue;
height: 70px;
}
.three{
background: red;
height: 20px;
}
.four{
background: brown;
height: 20px;
}
.five{
background: yellow;
height: 50px;
}
HTML:
<div class="panel">
<div class="section three">3</div>
<div class="section left one">1</div>
<div class="section four">4</div>
<div class="section left two">2</div>
<div class="section five">5</div>
</div>
I'm trying not to duplicate HTML to create this layout.
Any help is welcome. Thank you for your time!

Answer 1

#main {
width: 98vw;
height: 300px;
border: 1px solid black;
display: -webkit-flex; /* Safari */
display: flex;
}
#main div{ margin:5px;}
.flex-1{flex:1;}
.flex-2{flex:2;}
.flex-3{flex:3;}
<div id="main">
<div class='flex-2' style="background-color:coral;">RED</div>
<div class='flex-3' style="background-color:lightblue;">BLUE</div>
<div class='flex-1'></div>
<div class='flex-1' style="background-color:lightgreen;">Green div with more content.
</div>
you can add the content in their specific containers .I am unable to understand your numbering scheme , but you can add content likewise.
Read More