JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class='header'>
    THIS IS A TEST CODE WITH TEXT
  </div>

  <div class='content'>
    <div class='leftcontent'>
      CONTENT OF LEFT SIDE
    </div>
    <div class='rightcontent'>
      CONTENT OF RIGHT SIDE
    </div>
  </div>
</div>

<br />
<br />

<div class="container">
  <div class='header'>
    THIS IS A TEST CODE WITH TABLE
  </div>

  <div class='content'>
    <div class='leftcontent'>
      <table>
        <thead>
          <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
            <th>Column 4</th>
          </tr>

        </thead>
        <tbody>
          <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
            <td>Data 4</td>
          </tr>

        </tbody>
      </table>
    </div>
    <div class='rightcontent'>
      CONTENT OF RIGHT SIDE
    </div>
  </div>
</div>

CSS

.container {
  display: flex;
  flex-direction: column;
  background-color: grey;
  width: 100%;
  height: 200px;
}

.header {
  flex: 1;
  text-align: center;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: row;
}

.leftcontent {
  flex: 5;
  background-color: green;
}

.rightcontent {
  flex: 5;
  background-color: yellow;
}