JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  
  <div id="header_wrapper">
    Header 
  </div>
  
  <div id="content_wrapper" class="clearfix">
    
    <div id="div_1">
      
      Div 1
      
    </div>
      
    <div id="div_2">
      
      <ul>
        <li>Object 1</li>
        <li>Object 2</li>
        <li>Object 3</li>
        <li>Object 4</li>
      </ul>
      
    </div>
     
  </div>
    
</body>

CSS

body { font-size:10px; }

/* wrappers */
#header_wrapper { position:relative; width:95%; height:40px; margin:auto; margin-top:5px; padding:2px; border:1px solid red; }
#content_wrapper { position:relative; width:95%; margin:auto; margin-top:5px; padding:2px; border:1px solid red; }

/* clearfix */
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

/* div1 */
#div_1 { position:absolute; width:70%; top:5px; left:5px; border:1px solid purple; }


/* div 2 */
#div_2 { position:absolute; width:25%; top:5px; right:5px; border:1px solid purple; }
#div_2 ul { position:absolute; top:0px; left:0px; list-style-type:none; }
#div_2 li { width:100px; height:30px; margin:2px; padding:1px; border:1px solid darkgrey; }