html - 我无法排列不垂直对齐的 div 元素，以便它们自动调整大小

Question

我需要将标签与选择框并排对齐。问题是选择框的高度会随机变化。我希望标签调整其高度并在选择输入调整大小时自动垂直对齐。这是我到目前为止所拥有的:

.container {
  width: 400px;
  display: table;
}
.left {
  float: left;
  width: 40%;
  text-align: right;
  display: table-cell;
  vertical-align: middle;
}
.right {
  float: left;
  width: 60%;
  display: table-cell;
  vertical-align: middle;
}
select {
  height: 30px;
}

<div class="container">
  <div class="left">
    <span>Guest 1:</span>
  </div>
  <div class="right">
    <select>
      <option>1</option>
      <option>2</option>
    </select>
  </div>
</div>

感谢您的帮助，如果您需要更多信息或更多详细信息，请告诉我。谢谢

更新:我不能在标记中使用 table 或 form

Answer 1

只要摆脱两个 float ，它就会起作用。您将容器显示为表格单元格，因此请改用 text-align: left