如何将句子移到用户名部分下方？

Question

所以我遇到了这个问题，跨度覆盖了 div 的整个 space，有什么方法可以不让它这样做吗？或者有其他选择吗？我需要其他文本向下移动，但我卡住了，我不知道该怎么做...请帮忙

.post-area {
  margin-left: 5rem;
  margin-top: 3rem;
}

.twit {
  display: flex;
  flex-direction: row;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid gray;
}

.name {
  font-size: 20px;
  color: var(--text-secondary);
  font-weight: normal;
  display: inline;
  margin: 0;
  padding-left: 1rem;
  height: auto;
  margin: 0;
}

.username {
  display: inline;
  font-weight: normal;
  padding-left: 1rem;
  color: var(--text-primary);
  font-size: 20px;
}

.twit-post {
  display: inline-block;
}

.post-user {
  display: flex;
  width: 5rem;
  height: 5rem;
}

.twit-post {
  display: block;
}

<div class="post-area">
  <div class="twit">
    <img class="userpfp post-user" src="images/user_pfp.jpg" />
    <span class="name">Suisei 
    <i class="username"> @suisei_comet</i>
    </span>
    <br />
    <p class="twit-post">Oh I just made something new!</p>
  </div>
</div>

The picture shows that its covering the whole div

Answer 1

大概是这样的？

.post-area {
  margin-left: 5rem;
  margin-top: 3rem;
}

.twit {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid gray;
}

.name {
  font-size: 20px;
  color: var(--text-secondary);
  font-weight: normal;
  height: auto;
}

.username {
  display: inline;
  padding-left: 1rem;
  color: var(--text-primary);
  font-size: 20px;
}

.twit-post {
  padding-left: 1rem;
}

.post-user {
  display: flex;
  width: 5rem;
  height: 5rem;
}

<div class="post-area">
  <div class="twit">
    <img class="userpfp post-user" src="images/user_pfp.jpg" />
    <div class="twit-post">
      <span class="name">Suisei <i class="username"> @suisei_comet </i></span>
      <p>Oh I just made something new!</p>
    </div>
  </div>
</div>

如何将句子移到用户名部分下方？

How do I move the sentence below the username section?

html

css

layout