如何在CSS中并排对齐标题上的两个元素？

<div class="container">
  <h1 class="title">标题</h1>
  <div class="elements">
    <div class="element">元素1</div>
    <div class="element">元素2</div>
  </div>
</div>

<style>
.container {
  overflow: hidden; /* 清除浮动 */
}

.title {
  float: left;
}

.elements {
  float: right;
}

.element {
  margin-left: 10px; /* 可选，设置元素之间的间距 */
}
</style>

<div class="container">
  <h1 class="title">标题</h1>
  <div class="elements">
    <div class="element">元素1</div>
    <div class="element">元素2</div>
  </div>
</div>

<style>
.container {
  display: flex;
  justify-content: space-between;
}

.title {
  /* 可选，设置标题与元素之间的间距 */
  margin-right: 10px;
}

.element {
  /* 可选，设置元素之间的间距 */
  margin-left: 10px;
}
</style>

<div class="container">
  <h1 class="title">标题</h1>
  <div class="elements">
    <div class="element">元素1</div>
    <div class="element">元素2</div>
  </div>
</div>

<style>
.container {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 10px; /* 可选，设置元素之间的间距 */
}
</style>