html - Vertical CSS Timeline layout issue -

i creating vertical css timeline. float elements left , right stack each column. works have noticed after few elements large gap appears

look @ following codepen. after 5th element large gap appears on left hand side not consistent previous gaps, , again after few more elements. causing this?

note produced html produced angular

<ul class="timeline ng-scope">     <li class="year first">july 2015</li>     <li class="event highlightedsection ng-scope" ng-repeat="activity in activities">         <span class="itempoint"></span>          <span class="time ng-binding">2 minutes</span>         <div ng-if="activity.contenttype != 1" class="message ng-binding ng-scope">device connected</div>     </li> </ul>   

the basic cause way float works: won't float item position higher previous element! see example.

this good, because means when float image next paragraph, example, won't float way top of page stay next paragraph, want it! , in case of timeline, means list elements appear in order, going down page - otherwise 1 tall item cause smaller, later items appear earlier in timeline - bit counter-intuitive.

what potentially do, make timeline nicer, use either javascript or item-generation code figure out whether left or right column shorter, , dynamically add each item current shortest column rather alternating left , right.