JSFiddle - React, Tailwind, and code Playground

HTML

<header>Header</header>
<main>
  <section>
      <div>
          <div>Content</div>
          <section>
              <div>1</div>
              <div>2</div>
              <div>3</div>
          </section>
          <section>
              <div>4</div>
              <div>5</div>
              <div>6</div>
          </section>
          <section>
              <div>7</div>
              <div>8</div>
              <div>9</div>
          </section>          
      </div>
  </section>
  <section>Sidebar</section>
</main>
<footer>Footer</footer>

CSS

* {box-sizing:border-box}

header {
    border-top: 1px solid #000000;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    background-color: #40FF00;
    padding: 10px
}

main { 
    display: table; 
    border-collapse: collapse; 
    border: 1px solid #000000;
    width: 100%
}

section:nth-child(1) { 
    width: 70%;
    display: table-cell; 
    padding: 10px;
    background: #FF0000
}

section:nth-child(1) > div { 
    display: table; 
}

section:nth-child(1) > div > div { 
    display: table-caption;
    margin: 0;
    padding: 0;
}

section:nth-child(1) > div > section { 
    display: table-row; 
}

section:nth-child(1) > div > section > div { 
    display: table-cell; 
}

section:nth-child(2) { 
    width: 30%;
    display: table-cell; 
    padding: 10px;
    background: #0000FF
}

footer {    
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    padding: 10px;
    background-color: #FF8000    
}