I have a total of 5 divs inside one main div, and I want to arrange them so that 2 are floating on the left and the remaining 3 are floating on the right:
.container {
height: 400px;
border: 1px solid black;
}
.first, .second, .third, .fourth, .fifth {
width: 50%;
}
.first {
height: 300px;
background-color: red;
float: left;
}
.second {
height: 100px;
background-color: blue;
float: left;
}
.third {
height: 100px;
background-color: green;
float: right;
}
.fourth {
height: 200px;
background-color: yellow;
float: right;
}
.fifth {
height: 100px;
background-color: aquamarine;
float: right;
}<div class="container">
<div class="first"> FIRST </div>
<div class="second"> SECOND </div>
<div class="third"> THIRD </div>
<div class="fourth"> FOURTH</div>
<div class="fifth"> FIFTH </div>
</div>I want them to be arranged as follows:
FIRST and SECOND on the left
THIRD, FOURTH, and FIFTH on the right.
However, they are currently arranged like this:
FIRST and FIFTH on the left
SECOND, THIRD, and FOURTH on the right.
Can anyone help me fix this issue? Here is the code: https://jsfiddle.net/82bkdbpn/