使用CSS实现两个div并排显示，progress-container位于input-wrapper左侧

解决方案 #

方案1：父容器Flex布局（推荐）

不需要修改现有两个组件的内部结构，只需给包裹这两个元素的父容器添加如下样式即可：

/* 此处选择器替换为你实际的父元素选择器 */
.parent-container {
  display: flex;
  /* 若需要两个元素完全等高，将下述属性改为 align-items: stretch，同时删除.progress-container的固定height属性即可 */
  align-items: center;
  width: 100%;
}

此方案兼容性好，适配不同内容高度的场景，后续调整样式成本更低。

方案2：无需修改父元素，直接调整现有元素样式

如果无法修改父容器属性，可以直接给两个现有元素添加行内块+垂直对齐属性：

.progress-container {
  height: 22px;
  width: 22px;
  margin-right: 16px;
  background-color: red;
  /* 新增样式 */
  display: inline-block;
  vertical-align: middle;
}

.input-wrapper {
  border: 1px solid #ced4da;
  border-radius: 2px;
  overflow-y: hidden;
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
  /* 新增样式 */
  display: inline-block;
  vertical-align: middle;
  /* 若需要input区域占满行内剩余宽度，可添加下述样式：38px = 进度条宽度22px + 右侧边距16px */
  /* width: calc(100% - 38px); */
}

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