JSFiddle - React, Tailwind, and code Playground

HTML

<div class="App">
  <div class="Sidebar">Sidebar</div>
  <main class="Main">
    <div class="TitleBar">
      <div>Title</div>
      <div>
        <button>Create</button>
      </div>
    </div>
    <div class="TableContainer">
      <table class="Table">
        <thead>
          <tr>
            <th>Name</th>
            <th>Prop 1</th>
            <th>Prop 2</th>
            <th>Prop 3</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Item 1</td>
            <td>Value 1.a</td>
            <td>Value 1.b</td>
            <td>Value 1.c</td>
            <td>
              <button>Edit</button>
            </td>
          </tr>
          <tr>
            <td>Item 2</td>
            <td>Value 2.a</td>
            <td>Value 2.b</td>
            <td>Value 2.c</td>
            <td>
              <button>Edit</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </main>
</div>

CSS

.App {
  display: flex;
  flex-direction: row;
  width: 100vw;
}

.Sidebar {
  display: block;
  width: 25%;
  background-color: red;
  flex-grow: 0;
  flex-shrink: 0;
}

.Main {
  display: flex;
  flex-direction: column;
  width: 75%;
  background-color: green;
}

.TitleBar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.TableContainer {
  width: 100%;
  position: relative;
}

td {
  min-width: 500px;
  
}

.Table {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}