I'd like to code html+css to achieve result as shown on attached image: ![enter image description here](https://i.stack.imgur.com/NuPJU.png).

I mean the coding part with text and arrow box. Putting just position absolute is not an answer, cause I need text to float round the arrow box. Is there any way to do that?

I've alredy tried putting all kinds of floats on box and paragraf tag with text. Placing arrow box before, after and in paragraf tag. Also tried using vertical-align and position on arrow box.

Fiddle to play with:
<http://jsfiddle.net/K2S5y/1/>

```
<div class="content">
<p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas males elit lectus felis, malesuada ultricies. Curabitur et ligula.</p>
<div class="arrowMore">arr</div>                
</div>

.content{width:170px;height:170px;border:1px solid red;}
.arrowMore{background:blue;width:70px;height:70px;}

```