Paragraphs wrapping other paragraphs of different font sizes

Question

This is difficult to explain

I have a div tag that includes many p tags. These p tags are varying font sizes up to 250.

I would like the text to wrap the larger font sizes. For instance, if I have a paragraph with the work "ok" with a font size of 250, I want the other paragraph tags to wrap around it instead of having one line like it is now. This must remain a single div tag containing multiple p tags. Here are images explaining what I mean: http://imgur.com/0ED1cS6

I should add, the order of the other paragraphs do not matter, they can be completely random just as long as there are multiple lines wrapping the larger fonts, so the last paragraph can be at the top. Whichever can fit the most text in the smallest area is what I am looking for.

I have put an example on jsfiddle, asdf, qwer, sd, and ds should be stacked on top of each other beside test http://jsfiddle.net/rfcy2f15/1/

Answer 1

Sorry about my english and I'n not sure that I understand you but this could help you: http://jsfiddle.net/4kLyxgpx/

p {
    display: block;
    line-height: 100%;
    margin: 0;
}

And HTML:

<div>
    <p style='font-size: 100px;display: inline; float:left;'>test</p>
    <p style='font-size: 20px;'>asdf</p>
    <p style='font-size: 12px;'>qwer</p>
    <p style='font-size: 10px;'>sd</p>
    <p style='font-size: 10px;'>ds</p>
    <p style='font-size: 40px;'>csd</p>
    <p style='font-size: 10px;'>werw</p>
</div>