JSFiddle - React, Tailwind, and code Playground

by Riskbreaker

HTML

<body>
  
  <div id="header_wrapper">
    Header 
  </div>
  
  <div id="content_wrapper">
    
    <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 {width:95%; margin:auto; margin-top:5px; padding:2px; border:1px solid red; display: table;}



/* div1 */
#div_1 { width:70%; border:1px solid purple; display: table-cell; vertical-align: top;}


/* div 2 */
#div_2 {width:25%; border:1px solid purple; display: table-cell; vertical-align: top;}
#div_2 ul {list-style-type:none; }
#div_2 li { width:100px; height:30px; margin:2px; padding:1px; border:1px solid darkgrey; }