.two-col {
  display: flex;
  gap: 5px;
}

.two-col .col1 {
  flex: 1;               /* ขนาดคอลัมน์ 1 ส่วน */
  background: #f7f7f7;
  padding: 10px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.two-col .col2 {
  flex: 2;               /* ขนาดคอลัมน์ 2 ส่วน */
  background: #f7f7f7;
  padding: 10px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.two-col .col3 {
  flex: 3;               /* ขนาดคอลัมน์ 3 ส่วน */
  background: #f7f7f7;
  padding: 10px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.two-col .col170px {
  width: 170px;           /* ขนาดคอลัมน์ 10+150+10 */
  background: #f7f7f7;
  padding: 10px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.two-col .col300px {
  width: 300px;           /* ขนาดคอลัมน์ 10+280+10 */
  background: #f7f7f7;
  padding: 10px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

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