<div class="text-wrap">
    <div class="text-item">
        Текст 1
    </div>
    
    <div class="text-item">
        Текст 2
    </div>
    
    <div class="text-item">
        Текст 3
    </div>
    
    <div class="text-item">
        Текст 4
    </div>
</div>

<div class="input-wrap">
    <input id="input" type="text" value="Текст 1">
</div>
div.text-wrap {
  display: flex;
}
div.text-item {
  width: 20vw;
  margin: 4px;
  padding: 4px;
  background-color: #EEE;
  cursor: pointer;
}
const input = document.getElementById('input');
const onClick = e => input.value = e.target.textContent.trim();
document
  .querySelectorAll('.text-item')
  .forEach(el => el.addEventListener('click', onClick));

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.