title: vis timeline how to put a particular item at bottom of the chart and all items are still align properly
body: <p>I need to put one particular item at the bottom of my vis timeline chart. I can use jquery to move the item to the bottom of the chart after it was rendered. The problem is that it may over lap with next item. and also other items may not align properly.</p>
  
  <p>Your help on this is greatly appreciated.</p>
  
  <p>Thanks</p>
  
  <p>here is the code</p>
  
  <p><a href="https://jsfiddle.net/gbdjbdhv/28/" rel="nofollow noreferrer">https://jsfiddle.net/gbdjbdhv/28/</a></p>
  
  <pre><code>var container = document.getElementById('visualization');
  
   var items = new vis.DataSet([
      {id: 1, className:'item4', content: 'item 1', start: '2016-04-10'},
      {id: 2, className:'item5', content: 'item 2', start: '2016-04-10'},
           {id: 3, className:'item4', content: 'item 3', start: '2016-04-10'},
           {id: 13, className:'item4', content: 'item 5', start: '2016-04-16'},
      {id: 4, className:'likeToBeBottom', content: 'like to put this item at bottom', start: '2016-04-16'},
           {id: 5, className:'item4', content: 'item 5', start: '2016-04-18'},
      {id: 6, className:'item5', content: 'item 6', start: '2016-04-18'},
           {id: 7, className:'item4', content: 'item 7', start: '2016-04-18'},
      {id: 8, className:'item5', content: 'item 8', start: '2016-04-18'},
           {id: 9, className:'item4', content: 'item 9', start: '2016-04-25'},
      {id: 10, className:'item5', content: 'item 10', start: '2016-04-25'},
      {id: 11, className:'item6', content: 'item 11', start: '2016-04-25'}
    ]);
  
      var options = {
       showCurrentTime: true,
            align: 'left',
       orientation: {axis: 'both', item: 'top'}, 
       height: 400,
       margin: {
           axis: 100
      }
    };
    var timeline = new vis.Timeline(container, items, options);
      if ($('.vis-current-time')){
          var height = $('.vis-current-time').height();
          $('div.vis-item.vis-box.likeToBeBottom').css({'top': height -180});
      }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/1pI96.png" rel="nofollow noreferrer">The problem is that  the item I moved to bottom overlap with other items</a></p>
  
  <p>[<img src="https://i.stack.imgur.com/1pI96.png" alt="enter image description here">]</p>