html - Align list items with variable height to bottom ul -

i'd align series of li items bottom of parent, ul. 1 of tricky parts is: li items require float: left items being variable in height , width. there way achieve without using "hacky" method?

here's current code:

ul {    width: 1000px;    height: 400px;    float: left;    vertical-align: bottom; /* doesn't influence list items because of float: left. thought i'd put here anyways */  }    ul li {    float: left;    display: inline-block;  }    ul li figure {    /* determines width & height of list item */    margin: 0; padding: 0;    width: 150px;    height: 150px;    background: red;  }    ul li:nth-child(2n) figure {    width: 300px;    height: 300px;  }

<ul>    <li>      <figure>        <img />      </figure>    </li>    <li>      <figure>        <img />      </figure>    </li>    <li>      <figure>        <img />      </figure>    </li>    <li>      <figure>        <img />      </figure>    </li>  </ul>

note: width of ul's width variable , design requires there no gap between list items. i'm looking achieve:

see snippet, note fixed width on ul means distribution of li table-cell, may need work on in regards "gaps" between li. didn't specify how supposed didn't try solve in specific way.

i think way go bottom align.

ul {    height: 400px;    float: left;    display: table;    list-style: none;  }    ul li {    display: table-cell;    vertical-align: bottom;    margin: 0;    padding: 0;  }    ul li figure {    /* determines width & height of list item */    margin: 0;    padding: 0;    width: 150px;    height: 150px;    background: red;    display: inline-block;  }    ul li:nth-child(2n) figure {    width: 300px;    height: 300px;  }

<ul>    <li>      <figure>        <img />      </figure>    </li>    <li>      <figure>        <img />      </figure>    </li>    <li>      <figure>        <img />      </figure>    </li>    <li>      <figure>        <img />      </figure>    </li>  </ul>