JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="textarea" style="width:250px;height:100px;"></textarea>
<div class="dropdown">
  <div id="myDropdown" class="dropdown-content">
    <a>
      <div class="container">
        <div class="block word">con</div>
        <div class="block prob">20%</div>
        </div>
    </a>
    <a>
      <div class="container">
        <div class="block word">constant</div>
        <div class="block prob">20%</div>
        </div>
    </a>
  </div>
</div>

CSS

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  vertical-align: middle;
}

.block {
  width: 60px;
  height: auto;
  margin: 3px;
  overflow: hidden;
}



.word {
  text-align: left;
}

.prob {
  text-align: right;
}


.dropdown-content {
  display: none;
  background-color: #f1f1f1;
  width: 300px;
  height: auto;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  display: block;
}

// .dropdown a:hover { background-color: #ddd; }
.show { display: block; }

JavaScript

const SPACEBAR_KEY_CODE = [0,32];
const ENTER_KEY_CODE = 13;
const DOWN_ARROW_KEY_CODE = 40;
const UP_ARROW_KEY_CODE = 38;
const ESCAPE_KEY_CODE = 27;


const items = document.querySelectorAll("#myDropdown > a");

var preItem, currItem;

var tabCnt = 0;
const itemLen = items.length;

document.getElementById("myDropdown").classList.toggle("show");


$(document).delegate('#textarea', 'keydown', function(e) {
	var keyCode = e.keyCode || e.which;
  if (keyCode == 9) {
  	e.preventDefault();
    currItem = items[tabCnt % itemLen];
    currItem.style.backgroundColor = 'lightblue';
    tabCnt += 1;
    if (preItem) {
    	preItem.style.backgroundColor = '';
    }
    var word = $(currItem).find('.word');
    $('#textarea').text($(word).text());
    preItem = currItem;
  }
});