Depending on your requirements..you can use absolute positioning:
Demo Fiddle
<ul>
<li style="top: 1em; height: 4em; background: brown;left:1em;">1</li>
<li style="top: 2em; height: 2em; background: red;left:2em;">2</li>
<li style="top: 3em; height: 3em; background: green;left:3em;">3</li>
<li style="top: 5em; height: 1em; background: blue;left:1em;">4</li>
</ul>
nb. although -take your styles out of being inline!
The above fiddle uses nth-child
, which you can use to perform rudimentary pattern matching if these elements follow some sort of predictable ordering.
Or you can use CSS columns depending on your requirements...if the elements appear in dedicated vertical 'lanes'
Note that without using one of the above, you will need to resort to either your own JS for layout management or a pre-existing library like masonry or isotope as vanilla CSS and HTML does not allow for vertically nested row ordering of elements.