css - Break text inline list -

i have problem horizontal list. have 200px sized li elements inside 800px ul. want ul scroll horizontally, , text inside li break. causes li elements lose vertical position.

html:

 <div>     <ul>         <li>one</li>         <li>two</li>         <li>three 3 three 3 three 3 three 3 three 3 three 3 three 3 three three</li>         <li>four</li>     </ul> </div> 

css:

ul {     width: 600px;     height: 400px;     display: block;     white-space: nowrap;     overflow-x: auto;     overflow-y: hidden; } li {     width: 150px;     height: 150px;     display: inline-block; } 

kinda hard describe.. see fiddle: https://jsfiddle.net/yrltslrf/

add vertical-align: top; li.