lining up wrapped texts vertically

Question

I want to start horizontally wrapped li texts in line, now it goes upward. Please see my example

HTML

  <ul>
  <li>Long text goes here.</li>
  <li>Another Longer Text Goes Here</li>
  <li>Shorter text</li>
  </ul>

CSS

ul {width:150px;}
li {width:30%; display:inline-block;whitespace:pre-line;}   

http://jsfiddle.net/wbu9ksco/

Thank you.

Answer 1

Use vertical align:

li {
   vertical-align: text-top;
}

Updated fiddle