How to make html elements flow like text-CodePudding

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.&gt; </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.&gt; </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.&gt; </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>

CodePudding user response：

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>

CodePudding user response：

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.&gt; </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.&gt; </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.&gt; </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>