How to stop text from jumping down it's own line - css

Question

This is a follow on from my other post but with a different problem.
I have three CSS labels with text next to each one.
How can I stop the large block of text from jumping down to the next line?
I need the text to start next to the label (same as the colored examples underneath with short amount of text) and then wrap down to the next line once it runs out of space.
.list {
margin: 0;
padding: 0;
list-style-type: none;
}
.list li {
margin-bottom: 10px;
}
.list li > div:first-child{
position: relative;
border-left: 1px solid #fff;
margin-right: 10px;
}
.list li > div{
display: inline-block;
}
.triangle, .triangle2 {
display: block;
position: absolute;
top: 0;
right: -10px;
height: 0;
width: 0;
border-top: 15px solid transparent;
border-left: 10px solid #eee;
border-bottom: 15px solid transparent;
z-index: 1;
}
.triangle2 {
border-left-color: white;
left: 0;
}
.label {
letter-spacing: 1px;
line-height: 30px;
padding: 0 20px 0 30px;
text-decoration: none;
cursor: default;
}
.neutral {
background: #F5F4F9;
}
.neutral .triangle{
border-left: 10px solid #F5F4F9;
}
.neutral .label {
color: #999;
}
.positive {
background: #DFF0D8;
}
.positive .triangle{
border-left: 10px solid #DFF0D8;
}
.positive .label {
color: #468847;
}
.negative {
background: #F2DEDE;
}
.negative .triangle {
border-left: 10px solid #F2DEDE;
}
.negative .label {
color: #b94a48;
}
<ul class="list">
<li>
<div class='neutral'>
<span class="triangle2"></span>
<span class="label">some text</span>
<span class="triangle"></span>
</div>
<div class="label-value">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sagittis ipsum tellus, dignissim rhoncus nulla vestibulum ut. Curabitur blandit vitae orci a dignissim. Proin viverra risus velit, sed eleifend odio tincidunt in. Vivamus eu malesuada tortor. Maecenas eleifend faucibus arcu. Phasellus mollis.
</div>
</li>
<li>
<div class='positive'>
<span class="triangle2"></span>
<span class="label">some text</span>
<span class="triangle"></span>
</div>
<div>
Some other text
</div>
</li>
<li>
<div class='negative'>
<span class="triangle2"></span>
<span class="label">some text</span>
<span class="triangle"></span>
</div>
<div>
Some other text
</div>
</li>
</ul>

Answer 1

Remove the div around the text and it'll wrap around the label automagically.
As a bonus, add a bottom margin to .list li > div to push the new line down a bit more if it looks too close to the label.
.list {
margin: 0;
padding: 0;
list-style-type: none;
}
.list li {
margin-bottom: 10px;
}
.list li > div:first-child{
position: relative;
border-left: 1px solid #fff;
margin-right: 10px;
}
.list li > div{
display: inline-block;
}
.triangle, .triangle2 {
display: block;
position: absolute;
top: 0;
right: -10px;
height: 0;
width: 0;
border-top: 15px solid transparent;
border-left: 10px solid #eee;
border-bottom: 15px solid transparent;
z-index: 1;
}
.triangle2 {
border-left-color: white;
left: 0;
}
.label {
letter-spacing: 1px;
line-height: 30px;
padding: 0 20px 0 30px;
text-decoration: none;
cursor: default;
}
.neutral {
background: #F5F4F9;
}
.neutral .triangle{
border-left: 10px solid #F5F4F9;
}
.neutral .label {
color: #999;
}
.positive {
background: #DFF0D8;
}
.positive .triangle{
border-left: 10px solid #DFF0D8;
}
.positive .label {
color: #468847;
}
.negative {
background: #F2DEDE;
}
.negative .triangle {
border-left: 10px solid #F2DEDE;
}
.negative .label {
color: #b94a48;
}
<ul class="list">
<li>
<div class='neutral'>
<span class="triangle2"></span>
<span class="label">some text</span>
<span class="triangle"></span>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sagittis ipsum tellus, dignissim rhoncus nulla vestibulum ut. Curabitur blandit vitae orci a dignissim. Proin viverra risus velit, sed eleifend odio tincidunt in. Vivamus eu malesuada tortor. Maecenas eleifend faucibus arcu. Phasellus mollis.
</li>
<li>
<div class='positive'>
<span class="triangle2"></span>
<span class="label">some text</span>
<span class="triangle"></span>
</div>
<div>
Some other text
</div>
</li>
<li>
<div class='negative'>
<span class="triangle2"></span>
<span class="label">some text</span>
<span class="triangle"></span>
</div>
<div>
Some other text
</div>
</li>
</ul>

Answer 2

A solution with flexbox:
add display: flex; align-items: flex-start; on your li element.
add flex: none on the first child of your li element.
If you want to center the text you can add a litte padding-top on your second child
See https://developer.mozilla.org/en-US/docs/Web/CSS/flex for further explanations how flex works.
Note : flex works on IE10 and higher, but you need to add the -ms- prefix for IE10.
.list {
margin: 0;
padding: 0;
list-style-type: none;
}
.list li {
margin-bottom: 10px;
display: flex;
align-items: flex-start;
}
.list li > div:first-child{
position: relative;
border-left: 1px solid #fff;
margin-right: 10px;
flex: none;
padding-top : 0;
}
.list li > div{
display: inline-block;
padding-top : 6px;
}
.triangle, .triangle2 {
display: block;
position: absolute;
top: 0;
right: -10px;
height: 0;
width: 0;
border-top: 15px solid transparent;
border-left: 10px solid #eee;
border-bottom: 15px solid transparent;
z-index: 1;
}
.triangle2 {
border-left-color: white;
left: 0;
}
.label {
letter-spacing: 1px;
line-height: 30px;
padding: 0 20px 0 30px;
text-decoration: none;
cursor: default;
}
.neutral {
background: #F5F4F9;
}
.neutral .triangle{
border-left: 10px solid #F5F4F9;
}
.neutral .label {
color: #999;
}
.positive {
background: #DFF0D8;
}
.positive .triangle{
border-left: 10px solid #DFF0D8;
}
.positive .label {
color: #468847;
}
.negative {
background: #F2DEDE;
}
.negative .triangle {
border-left: 10px solid #F2DEDE;
}
.negative .label {
color: #b94a48;
}
<ul class="list">
<li>
<div class='neutral'>
<span class="triangle2"></span>
<span class="label">some text</span>
<span class="triangle"></span>
</div>
<div class="label-value">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sagittis ipsum tellus, dignissim rhoncus nulla vestibulum ut. Curabitur blandit vitae orci a dignissim. Proin viverra risus velit, sed eleifend odio tincidunt in. Vivamus eu malesuada tortor. Maecenas eleifend faucibus arcu. Phasellus mollis.
</div>
</li>
<li>
<div class='positive'>
<span class="triangle2"></span>
<span class="label">some text</span>
<span class="triangle"></span>
</div>
<div>
Some other text
</div>
</li>
<li>
<div class='negative'>
<span class="triangle2"></span>
<span class="label">some text</span>
<span class="triangle"></span>
</div>
<div>
Some other text
</div>
</li>
</ul>

Answer 3

You can use "float: left" to wrap your div (note that I moved your label), but maybe there are some more modern approaches
.list {
margin: 0;
padding: 0;
list-style-type: none;
}
.list li {
margin-bottom: 10px;
}
.list li > div:first-child{
position: relative;
border-left: 1px solid #fff;
margin-right: 10px;
}
.list li > div{
display: inline-block;
}
.triangle, .triangle2 {
display: block;
position: absolute;
top: 0;
right: -10px;
height: 0;
width: 0;
border-top: 15px solid transparent;
border-left: 10px solid #eee;
border-bottom: 15px solid transparent;
z-index: 1;
}
.triangle2 {
border-left-color: white;
left: 0;
}
.label {
letter-spacing: 1px;
line-height: 30px;
padding: 0 20px 0 30px;
text-decoration: none;
cursor: default;
}
.neutral {
background: #F5F4F9;
}
.neutral .triangle{
border-left: 10px solid #F5F4F9;
}
.neutral .label {
color: #999;
}
.positive {
background: #DFF0D8;
}
.positive .triangle{
border-left: 10px solid #DFF0D8;
}
.positive .label {
color: #468847;
}
.negative {
background: #F2DEDE;
}
.negative .triangle {
border-left: 10px solid #F2DEDE;
}
.negative .label {
color: #b94a48;
}
<ul class="list">
<li>
<div class="label-value">
<div class='neutral' style="float: left">
<span class="triangle2"></span>
<span class="label">some text</span>
<span class="triangle"></span>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sagittis ipsum tellus, dignissim rhoncus nulla vestibulum ut. Curabitur blandit vitae orci a dignissim. Proin viverra risus velit, sed eleifend odio tincidunt in. Vivamus eu malesuada tortor. Maecenas eleifend faucibus arcu. Phasellus mollis.
</div>
</li>
<li>
<div class='positive'>
<span class="triangle2"></span>
<span class="label">some text</span>
<span class="triangle"></span>
</div>
<div>
Some other text
</div>
</li>
<li>
<div class='negative'>
<span class="triangle2"></span>
<span class="label">some text</span>
<span class="triangle"></span>
</div>
<div>
Some other text
</div>
</li>
</ul>