title: Wrapping text within container without messing up styling in the parent container
body: <p>I have a problem with text wrapping within my container. Working code snippet below.</p>
  <p>In the sample above, everything works fine until the stepper-hor container has enough space to present the content:
  <a href="https://i.stack.imgur.com/DTTry.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DTTry.png" alt="enter image description here" /></a></p>
  <p>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.</p>
  <p>Currently, when I set stepper-hor width to 350px, step-text container (box with blue border) goes below the box with green border:
  <a href="https://i.stack.imgur.com/lAtfp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lAtfp.png" alt="enter image description here" /></a></p>
  <p><strong>What I wish to achieve is something like this:</strong>
  <a href="https://i.stack.imgur.com/KGOrO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KGOrO.png" alt="enter image description here" /></a></p>
  <p>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:
  <a href="https://codesandbox.io/s/confident-breeze-qm4bf?file=/styles.css" rel="nofollow noreferrer">https://codesandbox.io/s/confident-breeze-qm4bf?file=/styles.css</a></p>
  <p>EDIT: @Temani and @Daniel below suggested display: flex; which helped nicely.
  Here is the codesandbox fork with implemented changes:
  <a href="https://codesandbox.io/s/suspicious-wescoff-wgyny?file=/styles.css" rel="nofollow noreferrer">https://codesandbox.io/s/suspicious-wescoff-wgyny?file=/styles.css</a></p>
  <p>Thank you lads.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="stepper-hor"&gt;
    &lt;p class="step-container" }&gt;
      &lt;span class="step-circle-default"&gt;1&lt;/span&gt;
      &lt;span class="step-additional-label"&gt;100%&lt;/span&gt;
      &lt;span class="step-text"&gt;Take a shower&lt;/span&gt;
    &lt;/p&gt;
    &lt;p class="step-container" }&gt;
      &lt;span class="step-circle-default"&gt;2&lt;/span&gt;
      &lt;span class="step-additional-label"&gt;10%&lt;/span&gt;
      &lt;span class="step-text"&gt;Read a book&lt;/span&gt;
    &lt;/p&gt;
    &lt;p class="step-container" }&gt;
      &lt;span class="step-circle-active"&gt;13&lt;/span&gt;
      &lt;span class="step-additional-label"&gt;79%&lt;/span&gt;
      &lt;span class="step-text"&gt;
              Do some activity with long description that will require more space
            &lt;/span&gt;
    &lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>