JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  
    <main>
      <section>
        メインコンテンツ(可変)
      </section>
    </main>

    <aside>
      サイドコンテンツ(300px)
    </aside>
  
  </div>

CSS

.container {
  display: flex;
}

main {
  flex: 1;
  height: 500px;
  background-color: red;
  color: #fff;
}

aside {
  width: 300px;
  height: 500px;
  margin-left: 10px;
  background-color: blue;
  color: #fff;
}