JSFiddle - React, Tailwind, and code Playground

HTML

<form class="hint-search">
  <input type="text" class="hint-search__input" required />
  <div class="hint-search__ph">
    Foo: <span class="pseudo js-hint-search__hint" data-hint="Bar">Bar</span>
  </div>
</form>

CSS

body, input{
  font-family: Helvetica;
  font-size: 14px;
}

.pseudo{
  text-decoration: underline;
  color: #0aa;
  cursor: pointer;
}

.hint-search{
  position: relative;
}
  .hint-search__ph{
    position: absolute;
    top: 3px;
    left: 5px;
    color: #ccc;
  }
  .hint-search__input{
    color: #000;
  }
  .hint-search__input:valid + .hint-search__ph{
    display: none;
  }

JavaScript

$(function(){
	$('.js-hint-search__hint').on('click', function(){
  	var $self = $(this);
    $self
    	.closest('.hint-search')
      .find('.hint-search__input')
      .val($self.data('hint'));
  });
});