JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <div id="rgtDiv">
  <!--DIVS ARE STACKED WIHTIN PARENT DIV THAT IS FLOATED AT WIDTH:45% TO ADJUST FOR PADDING-->
    <div id="div1">
      <ul>
        <a href="#"><li>link section 1</li></a>
        <a href="#"><li>link section 1</li></a>
        <a href="#"><li>link section 1</li></a>
        <a href="#"><li>link section 1</li></a>
        <a href="#"><li>link section 1</li></a>
        <a href="#"><li>link section 1</li></a>
        <a href="#"><li>link section 1</li></a>
        <a href="#"><li>link section 1</li></a>
        <a href="#"><li>link section 1</li></a>
        <a href="#"><li>link section 1</li></a>
        <a href="#"><li>link section 1</li></a>
      </ul>
    </div>
    <!--STACKED BOTTOM LEFT SIDE DIV-->
    <div id="div2">
      <ul>
        <a href="#"><li>link section 2</li></a>
        <a href="#"><li>link section 2</li></a>
        <a href="#"><li>link section 2</li></a>
        <a href="#"><li>link section 2</li></a>
        <a href="#"><li>link section 2</li></a>
        <a href="#"><li>link section 2</li></a>
        <a href="#"><li>link section 2</li></a>
      </ul>
    </div>
  </div>
  <!--FLOATED DIV TO RIGHT THAT WILL HOLD NEXT TWO STACKED DIVS-->
  <div id="lftDiv">
    <div id="div3">
      <ul>
        <a href="#"><li>link section 3</li></a>
        <a href="#"><li>link section 3</li></a>
        <a href="#"><li>link section 3</li></a>
        <a href="#"><li>link section 3</li></a>  
        <a href="#"><li>link section 3</li></a>
        <a href="#"><li>link section 3</li></a>
        <a href="#"><li>link section 3</li></a>
        <a href="#"><li>link section 3</li></a>
        <a href="#"><li>link section 3</li></a>
        <a href="#"><li>link section 3</li></a>
        <a href="#"><li>link section 3</li></a>
        <a href="#"><li>link section 3</li></a>
        <a href="#"><li>link section 3</li></a>
        <a href="#"><li>link section 3</li></a>
        <a href="#"><li>link section 3</li></a>
...

CSS

li {
  list-style-type:none;
  background:#999;
  border:solid 1px #000;
  text-align:center;
}
li:hover{
  background-color:#efefef;
}
a {
  text-decoration:none;
}
#container{
  width:700px;min-height:500px;
}
#rgtDiv{
  float:left;width:45%; 
  background-color:red;
  padding:10px;
}
#lftDiv{
  float:right;width:45%; 
  background-color:orange;
  padding:10px;
}
#div1{
  background-color:lightgreen;
}
#div2{
  background-color:lightblue;
}
#div3{
  background-color:lightyellow;
}
#div4{
  background-color:white;
}
.footer {
  text-align:center;
  margin-top:10px;
}