如何在不修改现有DIV结构的前提下实现DIV段水平排列？

解决方案：使用CSS Grid布局实现 #

你无需修改原有HTML结构，直接给外层容器设置Grid布局即可实现需求，核心思路是将外层容器划分为2列2行的网格，让左侧的header、p分别占左列的两行，右侧包含两个子div的容器跨右列的两行：

1. 首先给最外层div添加样式：

/* 假设最外层div的选择器为.root-container，你可根据实际情况替换选择器 */
.root-container {
  display: grid;
  /* 定义两列，比例可按需调整，比如改为300px 1fr固定左栏宽度 */
  grid-template-columns: 1fr 1fr;
  /* 定义两行，高度由内容自动撑开 */
  grid-template-rows: auto auto;
  /* 可选：设置列/行间距，按需调整数值 */
  gap: 16px;
}

2. 给外层容器的第三个直接子元素（也就是包裹FirstDiv、SecondDiv的div）设置跨两行属性：

.root-container > div:nth-child(3) {
  /* 跨2行，占据右侧列的全部纵向空间 */
  grid-row: span 2;
  /* 可选：如果需要右侧两个div上下排列，给这个容器加flex布局 */
  display: flex;
  flex-direction: column;
  gap: 16px;
}

以上代码即可实现你需要的左右两栏布局：左栏上下排列Header、Paragraph，右栏上下排列FirstDiv、SecondDiv，完全不需要修改原有DOM结构。如果需要调整对齐方式、宽度比例等，直接修改Grid相关属性即可。

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