如何将标题居中和图标右对齐在同一行上并响应

<div class="container">
  <h1 class="title">标题</h1>
  <img src="icon.png" alt="图标" class="icon">
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.title {
  text-align: center;
}

.icon {
  margin-left: auto;
}