JSFiddle - React, Tailwind, and code Playground

HTML

<h2>
Normal behaviour
</h2>
<div class='content'>
  <div class='main-content'>
  MAIN CONTENT
  </div>
  <div class='side-content'>
  SIDE CONTENT
  </div>
</div>


<h2>
Not proportional content
</h2>
<div class='content'>
  <div class='main-content'>
  THIS IS A MAIN CONTENT AREA THAT SHOUDN'T CHANGE WIDTH
  </div>
  <div class='side-content'>
  THIS IS A SIDE CONTENT AREA THAT SHOUDN'T CHANGE WIDTH
  
  <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>

CSS

.content {
	padding-top: 5px;
	flex: 1;
	display: flex;
	flex-direction: row;
}

.main-content {
	flex: 2;
  background-color: yellow;
}

.side-content {
	flex: 1;
	margin-left: 2px;
	padding-left: 20px;
	padding-right: 20px;
  background-color: green;
}