Html 带弹性框的距离列间距(css)

我对flex box还很陌生，我想知道是否有一种方法可以让我在同一列中首先有两个div/span，并且在它们之间有一个足够的空间.

End goal

我目前拥有:

Current Progress without Text Count

使用文本计数:

With Text Count

HTML:

 <div class="emoji-text-container">
        <textarea type="text" class="text-area form-control" maxlength="279" formControlName="twitterText">
        </textarea>
        <button #toggleEmojiTwitter class="emoji-button mt-2 mr-2" type="button" (click)="_isTwitterEmojiPickerVisible = !_isTwitterEmojiPickerVisible"><mdb-icon class="emoji-icon" far icon="smile"></mdb-icon></button>
        <span class="text-count" [hidden]="_isTwitterEmojiPickerVisible">
          <span>{{_twitterCharLimit - this._postsForm.get('twitterText').value.length}}</span>
        </span>
 </div>

CSS:

//Emoji and Text Count

.emoji-container,
.emoji-text-container {
  display: flex;
  justify-content: center;
  align-items: start;
  margin: auto;
  border: 1px solid #d9d7d8;
}

.text-area {
  min-height: 15rem;
  border: 0;
  resize: none;
  outline: none;
  border: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.emoji-button {
  border-radius: 25px;
  width: 45px;
  height: 30px;
  border: 1px solid #c8c8c8;
  font-size: 20px;
  background: transparent;
  cursor: pointer;

  &:focus {
    outline: 0;
  }
}

.emoji-icon {
  color: #9a9696;
}

.text-count {
  font-size: 14px;
  border-radius: 25px;
  background-color: #f4f2f2;
  width: 3rem;
  height: 12%;
  padding-top: 4px;
  font-weight: bold;
  color: #8e8d8d;
  border: 1px solid #c8c8c8;
  text-align: center;
}