CSS triangle how to remove white space on the right

Question

I'm implementing a CSS triangle but it has whitespace on the right. I would like to display some text on the right of the triangle. I have tried editing the margin and the padding but had no success yet. I found other examples of CSS triangles like this one which also have whitespace on the right.

Anyone got a suggestion how to remove this?

I used http://apps.eky.hk/css-triangle-generator/

with this CSS code

width: 0px;
height: 0px;
border-style: solid;
border-width: 35px 22.5px 0 22.5px;
border-color: #ff5154 transparent transparent transparent;

Here's the example http://jsfiddle.net/g3b6w/

Answer 1

Add following css.

.triangle {
    display: inline-block;
}

Or you can use float property.

.triangle {
    float: left;
}

Answer 2

Add the text to the right by using display: inline-block; See http://jsfiddle.net/ben1/g3b6w/6/

display: inline-block;