JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wholecontainer">
    <div id="left">left skal være samme højde som right (røde)
        <br>- resten skal være overflow: auto
        <br>listen fortsætter
        <br>listen fortsætter
        <br>listen fortsætter
        <br>listen fortsætter
        <br>listen fortsætter
        <br>listen fortsætter
        <br>listen fortsætter</div>
    <div id="right">
        <div class="kasse">K1</div>
        <div class="kasse">K1</div>
        <div class="kasse">K1</div>
        <div class="kasse">K1</div>
        <div class="kasse">K1</div>
        <div class="kasse">K1</div>
        <div class="kasse">K1</div>
        <div class="kasse">K1</div>
    </div>
</div>

CSS

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:50%;
}
#col1 {
    float:left;
    width:56%;
    position:relative;
    left:72%;
    left: 10px;
    background-color:yellow;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}
#wholecontainer {
    border:2px solid black;
    float:left;
    width: 100%;
    background-color:red;
}
#left {
    float: left;
    width: 50%;
    background-color:yellow;
    overflow: auto;
}
#right {
    float: left;
    width: 50%;
    background-color:red;
}
.kasse {
    float: left;
    display: inline-block;
    padding: 5px;
    margin: 3px;
    background-color: blue;
    height: 40px;
    width: 40px;
}