html - Position of li elements in a 2 column list -

i trying 2 column list orders orders element left-to-right, top-to-bottom. have following html:

<ul>     <li>         <p>title 1</p>         <p>dd/mm/yy</p>         <p>sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>     </li>     <li>         <p>title 2</p>         <p>dd/mm/yy</p>         <p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>     </li>     <li>         <p>title 3</p>         <p>dd/mm/yy</p>         <p>sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>     </li>     <li>         <p>title 4</p>         <p>dd/mm/yy</p>         <p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>     </li> </ul> 

and css

ul {   width: 300px; }      li {   list-style: none;   position: relative;   width: 47%;   padding: 0 5px 0 0;   float: left; } 

the problem "title 3" underneath "title 2" whereas underneath "title 1". problem because height of title 1 element pushes right. text variable don't want set specific height.

i have created jsfiddle illustrate https://jsfiddle.net/wwzrbhno/

you can use combination of display:inline-block , vertical-align:top instead of float.

ul {   width: 300px; }      li {   list-style: none;   display: inline-block;   width: 47%;   padding: 0 5px 0 0;   vertical-align:top; } 

see fiddle: https://jsfiddle.net/wwzrbhno/4/