如何仅用CSS实现.dropdown-select与对应.phone div并排布局（不修改HTML）

要实现将.dropdown-select与对应的.phone配对同行布局，且不影响.text元素，可通过CSS Grid完成定位，无需修改HTML结构。以下是调整后的完整CSS代码：

/* 主容器使用Grid布局，定义两列：25% 和 75% */
.contactFormContainer .field__group {
  display: grid;
  grid-template-columns: 25% 75%;
  gap: 10px;
  margin-top: 20px;
}

/* .text元素占满整行（跨两列），不受Grid列约束 */
.contactFormContainer .text {
  grid-column: 1 / -1; /* 从第1列到最后一列 */
  margin-bottom: 10px;
}

/* 为每个dropdown-select和对应的phone分配同一行 */
.contactFormContainer .dropdown-select:nth-child(4) { grid-row: 4; }
.contactFormContainer .dropdown-select:nth-child(5) { grid-row: 5; }
.contactFormContainer .dropdown-select:nth-child(6) { grid-row: 6; }
.contactFormContainer .dropdown-select:nth-child(7) { grid-row: 7; }
.contactFormContainer .dropdown-select:nth-child(8) { grid-row: 8; }
.contactFormContainer .dropdown-select:nth-child(9) { grid-row: 9; }

.contactFormContainer .phone:nth-child(10) { grid-row: 4; }
.contactFormContainer .phone:nth-child(11) { grid-row: 5; }
.contactFormContainer .phone:nth-child(12) { grid-row: 6; }
.contactFormContainer .phone:nth-child(13) { grid-row: 7; }
.contactFormContainer .phone:nth-child(14) { grid-row: 8; }
.contactFormContainer .phone:nth-child(15) { grid-row: 9; }

/* 保持内部输入框宽度100% */
.contactFormContainer .dropdown-select__input,
.contactFormContainer .phone__container input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* 移动端适配：单列布局 */
@media (max-width: 768px) {
  .contactFormContainer .field__group {
    grid-template-columns: 1fr; /* 单列 */
  }
  
  /* 移动端下所有元素占满整行 */
  .contactFormContainer .dropdown-select,
  .contactFormContainer .phone {
    grid-column: 1 / -1;
  }
}

关键原理说明： #

1. Grid布局基础：主容器.field__group设置grid-template-columns: 25% 75%，直接定义两列宽度，满足需求比例。
2. .text元素处理：通过grid-column: 1 / -1让每个.text跨占所有列，保持原有块级元素的整行显示，不受Grid列布局影响。
3. 配对同行：利用:nth-child()选择器，为每一组.dropdown-select和.phone指定相同的grid-row值，强制它们处于同一行。例如第1个.dropdown-select（父容器的第4个子元素）和第1个.phone（父容器的第10个子元素）都设置grid-row: 4，实现同行排列。
4. 移动端适配：在小屏幕下切换为单列布局，所有元素占满整行，保证移动端体验。

内容的提问来源于stack exchange，提问作者Sheena Dessai