Twitter Typeahead Show Multiple values in HTML

i want to make dictionary app using typeahead multiple-dataset. want to format result data in html like want to align "words" in Left side of suggestions and "meaning" to align in right side of suggestions. i am new to this please help in simple term. thank you.

HTML

    <div class="container">
      

      <div class="example" id="multiple-datasets">
        <h2 class="example-name">Multiple Datasets</h2>

        <div class="demo">
          <input class="typeahead" type="text" placeholder="Type any word...">
        </div>
        
      </div>
    </div>

JS

 var WordsOne = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('words' , 'meaning'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: '../data/words1.json'
  });`

  var WordsTwo = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('words', 'meaning'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: '../data/words2.json'
  });

  $('#multiple-datasets .typeahead').typeahead({
    highlight: false
  },
  {
    name: 'words',
    display: 'words',
    limit: 25,
    source: WordsOne,
    templates: {
      suggestion: Handlebars.compile('<div>{{words}}{{meaning}}</div>')
    }
  },
  {
    name: 'words',
    display: 'words',
    limit: 25,
    source: words2,
    templates: {
      suggestion: Handlebars.compile('<div>{{words}}{{meaning}}</div>')
    }
  });

Json

[
{"word":"ABC","meaning":"XYZ"},

{"word":"ABC","meaning":"XYZ"},

{"word":"ABC","meaning":"XYZ"},

{"word":"ABC","meaning":"XYZ"}

]