基于Hugo短码开发的infobox如何在小屏保持两div单行对齐及配套样式

全量样式（适配现有Hugo短码DOM结构） #

/* 基础容器：实现圆角矩形外框 */
.infobox {
  margin: 1.5rem 0;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  background: #f9fafb;
}

.infobox-inner {
  /* 核心布局：强制单行横向排列，杜绝小屏元素下坠 */
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
}

/* 图标容器：适配响应式调整、内部居中 */
.infobox-icon-box {
  width: 56px;
  flex-shrink: 0; /* 关键规则：图标块不被挤压、不收缩宽度 */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #dbeafe;
}

.infobox-icon {
  display: block; /* 消除内联SVG基线偏移 */
  width: 24px;
  height: 24px;
  color: #2563eb; /* 匹配SVG的currentColor填充规则 */
}

/* 文本区域：实现非通长分隔线 */
.infobox-text {
  position: relative;
  padding: 1rem 1.25rem;
  flex-grow: 1;
}

/* 伪元素绘制分隔线，完全不改动内联SVG代码 */
.infobox-text::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1rem; /* 上下留空实现非通长效果 */
  bottom: 1rem;
  width: 1px;
  background: #e5e7eb;
}

.infobox-text p {
  margin: 0;
  line-height: 1.6;
}

/* 响应式规则：小屏调整尺寸 */
@media (max-width: 640px) {
  .infobox-icon-box {
    width: 40px;
  }
  .infobox-icon {
    width: 18px;
    height: 18px;
  }
  .infobox-text {
    padding: 0.75rem 1rem;
  }
}

方案逻辑说明 #

• 解决单行对齐问题：采用Flex横向布局替代inline-block方案，默认不开启换行规则，从布局机制上保证图标块和文本块永远保持左右排列，不会因为屏幕宽度变窄出现文本块下坠的问题；搭配flex-shrink: 0固定图标块尺寸，避免被文本内容挤压变形
• 图标居中问题：给图标容器设置Flex居中规则，配合display: block消除内联SVG的基线偏移，图标尺寸可通过媒体查询随容器同步调整
• 非通长分隔线：通过文本块的::before伪元素实现，定位在文本块最左侧，通过top/bottom值控制线的上下边距，不需要修改现有内联SVG代码，也不会和SVG样式产生冲突
• 不同类型信息框适配：只需为不同type的容器新增对应的样式类，分别调整图标块背景、图标颜色即可，不需要改动现有短码的核心输出逻辑

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