Display as much elements as it can fit in one line, and if not all of them can fit add additional element that represents number of remaining elements

I would like to align all tags for a given article in one line.

If all the tags can fit in one line, then I want to display all of them, like this:

But, if there is more tags and not all of them can fit in the same line, I would like to display as much of them as it can fit, and I want to add additional label that represents number of remaining tags, like this:

I created this quick start code so everyone can jump and update what is necessary.

.card {
  padding: 5px;
  width: 300px;
  height: 300px;
  border: 2px solid blue;
  display: flex;
  flex-direction: row;
  gap: 5px;
}

.tag {
  padding: 5px 8px;
  color: #2C3C93;
  background: rgb(44, 60, 147, 0.1);
  height: 20px;
}

<div class="card">
   <div class="tag">Developing</div>
   <div class="tag">Busniess</div>
   <div class="tag">Web Design</div>
</div>