How to make html elements flow like text - css

Question

Given I have two (or more) elements, ーlet's use div but they can be span or anything...ー I want the second one to be appended to the first one the same way it would happen with text.
HTML:
<div>First element taking space</div> <div>Second element</div>
What I want:
//<------ 1. parent width big enough -------->
First element taking space Second element
//<---- 2. bit smaller width ------>
First element taking space Second
element
//<- 3. even smaller ->
First element taking
space Second element
What it happens
//<------ 1. parent width big enough -------->
First element taking space Second element
//<---- 2. bit smaller width ------>
First element taking space // even if there's space for the "Second" word in
Second element // the 1st line it starts in the next line
//<- 3. even smaller ->
First element taking // even if there's space for the "Second element" full text
space // it starts in a new line
Second element
This is probably due to the "box" assigned to each element, behaving like this
╔══════════════════════╗
║╔════════════════════╗║
║║First element taking║║
║║space ║║
║╚════════════════════╝║
║╔══════════════╗ ║
║║Second element║ ║
║╚══════════════╝ ║
╚══════════════════════╝
I tried playing with display options (inline, inline-block, flex), white-space (wrap, pre-wrap)... but can't make it work as I want.
Note: the pre-wrap is because I want to preserve spaces as well.
Edit: Added the following snippet with current code:
.root {
display: flex;
align-items: flex-end;
flex-wrap: wrap;
background: pink;
}
.prefix {
white-space: pre-wrap;
}
.text {
white-space: pre-wrap;
}
.colored {
background: red;
}
.big { width: 500px; }
.small { width: 320px; }
.smaller { width: 150px; }
<div class="root">
<div class="prefix">1.> </div>
<div class="text">this is some text of arbitrary width </div>
<div class="text colored">colored text</div>
<div class="text"> more text</div>
</div>
<hr/>
<div class="root small">
<div class="prefix">2.> </div>
<div class="text">this is some text of arbitrary width </div>
<div class="text colored">colored text</div>
<div class="text"> more text</div>
</div>
<hr/>
<div class="root smaller">
<div class="prefix">3.> </div>
<div class="text">this is some text of arbitrary width </div>
<div class="text colored">colored text</div>
<div class="text"> more text</div>
</div>

Answer 1

The solution was very simple and stupid to the point I'm embarrassed: Just use inline elements.
Leaving it here as well in case anyone learning needs it...
.root {
background: pink;
}
.prefix {
display: inline; /* not needed if using native inline tags such as <span> */
white-space: pre-wrap;
}
.text {
display: inline; /* not needed if using native inline tags such as <span> */
white-space: pre-wrap;
}
.colored {
display: inline; /* not needed if using native inline tags such as <span> */
background: red;
}
.big { width: 500px; }
.small { width: 320px; }
.smaller { width: 150px; }
<div class="root">
<div class="prefix">1.> </div>
<div class="text">this is some text of arbitrary width </div>
<div class="text colored">colored text</div>
<div class="text"> more text</div>
</div>
<hr/>
<div class="root small">
<div class="prefix">2.> </div>
<div class="text">this is some text of arbitrary width </div>
<div class="text colored">colored text</div>
<div class="text"> more text</div>
</div>
<hr/>
<div class="root smaller">
<div class="prefix">3.> </div>
<div class="text">this is some text of arbitrary width </div>
<div class="text colored">colored text</div>
<div class="text"> more text</div>
</div>

Answer 2

I don't know if I understood you correctly but I think flexbox would solve your problem, take a look at the snippet below:
.container{
display:flex;
justify-content: center;
align-items: center;
height:100vh;
flex-direction: row;
}
.first-box{
width:auto;
height:auto;
display:flex;
justify-content: center;
align-items: center;
background-color: yellowgreen;
}
.second-box{
width:auto;
height:auto;
display:flex;
justify-content: center;
align-items: center;
background-color: tomato;
}
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="container">
<div class="first-box">This is some text.</div>
<div class="second-box">This is some text but in the second div which has a tomato background-color.</div>
</div>