Wrapping text within container without messing up styling in the parent container - html

Question

I have a problem with text wrapping within my container. Working code snippet below.
In the sample above, everything works fine until the stepper-hor container has enough space to present the content:
I'd like the step-text container (box with blue border) to always stay to in line with step-additional-label container (box with green border). Step-text container (box with blue border) should also wrap the text inside when container's width shrinks.
Currently, when I set stepper-hor width to 350px, step-text container (box with blue border) goes below the box with green border:
What I wish to achieve is something like this:
I've tried using different variations of
display: inline-block;
overflow-wrap: break-word;
in lines 64-65 but that didn't work as expected and often messed up the horizontal alignment between the step-circle-active and step-text.
Any help is very much appreciated.
Here is a more editing-friendly sandbox to play around:
https://codesandbox.io/s/confident-breeze-qm4bf?file=/styles.css
EDIT: #Temani and #Daniel below suggested display: flex; which helped nicely.
Here is the codesandbox fork with implemented changes:
https://codesandbox.io/s/suspicious-wescoff-wgyny?file=/styles.css
Thank you lads.
body {
font-family: "Arial Light";
background-color: #1e1e1e;
padding-top: 60px;
}
.stepper-hor {
background-color: #252525;
display: flex;
flex-direction: column;
/* width: 350px; */
/* HERE YOU CAN CHANGE THE WIDTH OF THE CONTAINER */
}
.step-container {
border: 1px solid rgba(255, 255, 0, 0.459);
min-height: 63px;
margin: 0;
}
.step-circle-default {
display: inline-block;
height: 21px;
width: 21px;
background-color: #666666;
color: #333333;
font-size: 0.65rem;
font-weight: bold;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
text-align: center;
line-height: 21px;
margin-right: 9px;
}
.step-circle-active {
display: inline-block;
height: 21px;
width: 21px;
background-color: #d85603;
color: #ffffff;
font-size: 0.65rem;
font-weight: bold;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
text-align: center;
line-height: 21px;
margin-right: 9px;
}
.step-additional-label {
border: 1px solid rgba(0, 128, 0, 0.575);
display: inline-block;
min-width: 26px;
font-size: 0.59rem;
color: #666666;
padding-right: 21px;
}
.step-text {
border: 1px solid rgba(0, 0, 255, 0.404);
display: inline-block;
overflow-wrap: break-word;
font-size: 0.82rem;
color: #ffffff;
position: relative;
min-height: 54px;
top: 4px;
}
.step-line {
border: 1px solid #444444;
}
<div class="stepper-hor">
<p class="step-container" }>
<span class="step-circle-default">1</span>
<span class="step-additional-label">100%</span>
<span class="step-text">Take a shower</span>
</p>
<p class="step-container" }>
<span class="step-circle-default">2</span>
<span class="step-additional-label">10%</span>
<span class="step-text">Read a book</span>
</p>
<p class="step-container" }>
<span class="step-circle-active">13</span>
<span class="step-additional-label">79%</span>
<span class="step-text">
Do some activity with long description that will require more space
</span>
</p>
</div>

Answer 1

You should change your step-container structure and use display: flex in order to achieve the result you want.
Here is an example:
HTML
<div class="step-container">
<div class="stats">
<span class="step-circle-active">13</span>
<span class="step-additional-label">79%</span>
</div>
<p class="step-text">
Do some activity with long description that will require more space
</p>
</div>
CSS
.step-container {
display: flex;
}
.step-container .stats {
display: flex;
}
There is no point in creating the step-container as a p element with multiple spans in it.

Answer 2

Adding CSS property display: flex; to the container .step-container will do the thing.