I'm struggling with some css coding. I want the text to wrap so the label is positioned on the middle right of the box, similar to this example: https://i.sstatic.net/RBIOS.png. However, currently it looks like this: http://jsfiddle.net/yuvemL1z/ and the label ends up being pushed under the text. Any assistance would be greatly appreciated. Thank you.
<div class="container">
<div class="row">
<div class="col-md-4">Text Test Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text<span class="label label-default pull-right">New</span></div>
<div class="col-md-4">Text</div>
<div class="col-md-4">Text</div>
</div>
</div>
h4 {
margin-top: 25px;
}
.row {
margin-bottom: 20px;
}
.row .row {
margin-top: 10px;
margin-bottom: 0;
}
[class*="col-"] {
padding-top: 15px;
padding-bottom: 15px;
background-color: #eee;
background-color: rgba(86,61,124,.15);
border: 1px solid #ddd;
border: 1px solid rgba(86,61,124,.2);
}
hr {
margin-top: 40px;
margin-bottom: 40px;
}