如何不修改HTML结构仅用CSS调整元素位置，将input移至菜单旁

完全可以实现，不需要修改HTML结构，可以通过以下两种方案实现：

方案1：使用display: contents（推荐，主流浏览器兼容） #

display: contents可以消除中间包裹容器的盒模型影响，让嵌套层级的子元素提升到同一层级参与布局，我们可以借此把所有需要排列的元素放到同一个Flex上下文里自由调整顺序：

.icon-test {
  width: 20px;
  height: 10px;
  background: red;
  display: block;
}

/* 最外层作为统一Flex容器 */
.header {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* 消除两个中间容器的盒模型，让内部子元素直接成为.header的子项 */
.panel-wrapper, .header-content {
  display: contents;
}

.top-menu {
  display: flex;
  list-style-type: none;
  font-style: initial;
  gap: 20px;
  margin: 0;
  padding: 0;
  order: 1; /* 菜单排第一位 */
}

/* 调整input顺序，排在菜单后面，刚好在菜单旁边 */
.panel-wrapper input {
  order: 2;
}

/* 调整span顺序，排在input后面 */
.header-content span {
  order: 3;
}

/* 调整icon顺序，排在最后 */
.icon-test {
  order: 4;
}

方案2：使用绝对定位（兼容老旧浏览器） #

如果需要兼容IE11等不支持display: contents的老旧浏览器，可以用绝对定位实现，缺点是需要提前为input预留占位空间，响应式适配时需要额外调整：

.icon-test {
  width: 20px;
  height: 10px;
  background: red;
  display: block;
}

.header {
  position: relative;
}

.header-content {
  display:flex;
  align-items: center;
  gap: 20px;
  /* 给input预留位置，可根据input实际宽度调整 */
  padding-left: 200px;
}

.top-menu {
  display: flex;
  list-style-type: none;
  font-style: initial;
  gap: 20px;
  margin: 0;
  padding: 0;
}

/* 绝对定位把input放到菜单旁边的预留位置处 */
.panel-wrapper input {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 180px;
}

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