JSFiddle - React, Tailwind, and code Playground

HTML

<div id="rightdocked">
<div id="RedDiv">
<div class="blackdivs"></div>
<div class="blackdivs"></div>
<div class="blackdivs"></div>
<div class="blackdivs">This one needs to go to the next column</div>
<div class="blackdivs">This one as well, column should be to the left</div>
</div>
</div>

CSS

.blackdivs{
    position: relative;
    margin-top: 0px;
    margin-bottom: 20px;
    width: 300px;
    height: 40px;
    border: solid 2px black;
    background-color: white;
}
.blackdivs:first-of-type {
   background-color: green;
}
#RedDiv {
    max-height: 180px;
    width: auto;
    z-index: 9;
    background-color: lightgreen;
    position: relative;
    float: left;
    background-color: white;
    border: 2px red solid;
}
#rightdocked {
  position:relative;
  width: auto;
  height: 300px;
  float: right
}