CSS - How to have children divs occupying the same vertical space as the text inside of the parent div

Question

I am a beginner to web development and to CSS.

I am creating a div that has text content inside of it. I want some of the text, the one that begins with "@", to be highlighted, and for that effect, i am putting that text inside a child div and adding a background and border to it.

This is an example of what I am doing, and the output that I get.

.box {
  border: 1px solid black;
  padding: 20px 30px;
  width: 150px;
  display: flex;
}

.small-box {
  border: 1px solid black;
  width: fit-content;
  padding: 3px;
  margin: 3px;
}

<div class="box">
  Good morning
  <div class="small-box">@admin</div>
  , and hello to you too,
  <div class="small-box">@devel</div>
</div>

Basically, I don't want the text from the class small-boxto be shrinked, and the words to be broken. And I would like that this div kept behaving like text, occupying the exact same space that it would occupy if there was no div at all.

I would like to create something like this:

This is my desired output

Answer 1

Flexbox was designed as a one-dimensional layout model. So if parent element have flex, items will be like your sample. Lets remove display: flex and increase box size:

.box {
  border: 1px solid black;
  padding: 20px 30px;
  width: 210px;
  /* display: flex; */
}

.small-box {
  border: 1px solid black;
  width: fit-content;
  padding: 3px;
  margin: 3px;
}

<div class="box">
  Good morning
  <span class="small-box">@admin</span>
  , and hello to you too,
  <span class="small-box">@devel</span>
</div>