如何在CSS中整齐地将排名放在图片的左侧

<div class="container">
  <div class="rank">1</div>
  <div class="image"><img src="image.jpg" alt="Image"></div>
</div>

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

.rank {
  margin-right: 10px;
}

.image img {
  max-width: 100%;
}

<div class="container">
  <div class="rank">1</div>
  <div class="image"><img src="image.jpg" alt="Image"></div>
</div>

.container {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 10px;
}

.rank {
  justify-self: start;
}

.image img {
  max-width: 100%;
}