html - List items not correctly aligning with an ng-repeat -

i have simple ng-repeat <li>. each <li> consumes 33.33% of width 3 items per row.

however, reason items in second row not line up. after big of digging, if apply min-width of say, 400px, works. but, can not description text length dynamic.

html:

<ul class="grid-wrap">   <li class="grid-col one-third" ng-repeat="job in jobs" ng-init="descriptionlimit = 20">     <div>{{ job.jobtitle }}</div>     <div>{{ job.location }}</div>     <div>{{ job.jobdescription | limitto:descriptionlimit }}        <span ng-click="descriptionlimit = job.jobdescription.length"> >> </span></div>   </li> </ul> 

css:

ul, ol {   list-style: none;     padding: 0;     margin: 0; }  .grid-wrap {         margin-left: -3em; /* same gutter */     overflow: hidden;     clear: both; }  .grid-col {     float: left;     padding-left: 3em; /* gutter between columns */     width: 100%;     -webkit-box-sizing: border-box;        -moz-box-sizing: border-box;             box-sizing: border-box; }  .one-third {     width: 33.33%; } 

plunker: http://plnkr.co/edit/owxrqojpaypdbe4twt3c?p=preview

if click on >> description expand , can see each <li> not line up:

might looking for?

.one-third:nth-of-type(3n+1) {   clear: both; } 

i.e. if want have maximum of 3 lis per row, , want align rows vertically, you'll need explicitly so.

edit: , of course angular, example this, first define clearing class:

.clear-li {   clear:both } 

and apply ng-class:

      <li class="grid-col one-third" ng-repeat="job in jobs" ng-init="descriptionlimit = 20" ng-class="{'clear-li': ($index % 3 === 0)}">