html - some strange layout using only ul/li elements with different height -

is possible create following layout using ul/li elements (i mean using normal way, without strange hacks)?

all elements in red has same width.

why want use ul/li elements?

all on page there ul/li elements similar layout, items same widtha , height. style exists seperate li element (it has particular background, inside each li elements styles defined child elements of li etc.). reason why asking this. point in commenst can use classes achieve same style. update css this.

if cannot use ul/li, best approach achieve kind of layout?

working example li , ul in jsfiddle