.two-col {
  display: flex;
  gap: 5px;             /* ระยะห่างระหว่างคอลัมน์ */
}

.two-col .col {
  flex: 1;               /* ให้คอลัมน์กว้างเท่ากัน */
  background: #f7f7f7;
  padding: 10px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.two-col .col1 {
  flex: 1;               /* ให้คอลัมน์กว้างเท่ากัน */
  background: #f7f7f7;
  padding: 10px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.two-col .col2 {
  flex: 2;               /* ให้คอลัมน์กว้างเท่ากัน */
  background: #f7f7f7;
  padding: 10px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.two-col .col3 {
  flex: 3;               /* ให้คอลัมน์กว้างเท่ากัน */
  background: #f7f7f7;
  padding: 10px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.two-col .col300px {
  width: 300px;               /* ให้คอลัมน์กว้างเท่ากัน */
  background: #f7f7f7;
  padding: 10px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* ถ้าหน้าจอแคบ (มือถือ) ให้ซ้อนเป็นคอลัมน์เดียว */
@media (max-width: 600px) {
  .two-col {
    flex-direction: column;
  }
}