<div class="page">
  <main class="content">
    <article>
      <p>
        ส่วนของเนื้อหาด้านซ้าย ซึ่งด้านขวาจะเป็น sidebar ของเว็บไซต์
      </p>
    </article>
  </main>
  <aside class="sidebar">
    <p>ด้านขวานี้เป็นส่วนของ sidebar ของเว็บไซต์</p>
  </aside>
</div>
.page {
  display: flex;
  background: white;
  border: 1px solid black;
}

.page > * {
  padding: 1em;
}

.content {
  background-color: pink;
  border: 1px solid black;
  flex-grow: 2;
}

.sidebar {
  background: lightgreen;
  border: 1px solid black;
  flex-grow: 1;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.