I'm trying to have a playbook layout style, which goes like this:

```
       Name: Text starting here - style #1
             text which should go in a new line with different style #2
             text continue here with another new line - style #1

Longer Name: Text starting here - style #1
             text which should go in a new line with different style #2
             text continue here with another new line - style #1

```

My problem is i'm unable to get style #2 text start with a new line.

This is my code:

```
<div class="line">
  <div class="level1">
    <div class="name" >name:</div> 
      Text starting here - style #1 
      <span>text which should go in a new line with different style #2</span> 
      text continue here with another new line - style #1
    </div>
  </div>

<style type="text/css">
.line {
    text-align: right;
    font-size: 14px;
    width: 477px;
    margin: 0 auto;

}

.level1 {
    display: inline-flex;
    font-size: 14px;
    line-height: 12px;

}

.name {
    display: inline-block;
    font-size: 14px;
    width: 40px;
    min-width: 50px;
    text-align: left;
    margin-left: 15px;

}

</style>

```

With these values, Style #2 always being break into a new column and not a new line. Here is [jsfiddle](https://jsfiddle.net/edw14jt7/) example. I'm pretty sure this is the "flex-inline" causing it. Do I have any alternative for that?