JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div class='input-with-div'>
  <div class='input-div'>
    <div class='input-div-message-box'>
      <div class='input-div-message'>
        Hello
      </div><div class='vertical-mid-hack'></div>
    </div><div class='vertical-mid-hack'></div>
  </div><div class='col input-box'>
    <input type='text' placeholder='Howdy!'/>
  </div>
</div>

CSS

body {
  font-family: arial;
}
.input-with-div:hover input {
  border-color: teal;
}
.input-with-div input:focus {
}
.input-with-div:hover .input-div {
  border-color: teal;
}
.input-div-message-box:hover {
  cursor: pointer;
  background-color: teal;
  color: white;
}
.input-div {
  border-top: 1px solid gray;
  border-left: 1px solid gray;
  border-bottom: 1px solid gray;
  background-color: white;
  width: 50px;
  height: 30px;
  display: inline-block;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  vertical-align: middle;
  text-align: center;
}
input {
  transition: box-shadow 0.15s linear;
  border-top: 1px solid gray;
  border-right: 1px solid gray;
  border-bottom: 1px solid gray;
  border-left: none;
  height: 30px;
  margin: 0;
  display: inline-block;
  padding: 0;
  outline: none;
  padding: 0 5px;
  background-color: white;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.input-div-message-box {
  width: 90%;
  height: 85%;
  display: inline-block;
  background-color: #ccc;
  border-radius: 2px;
  vertical-align: middle;
  font-size: 12px;
  letter-spacing: 0.5px;
}
.input-div-message {
  display: inline-block;
  vertical-align: middle;
}
.vertical-mid-hack {
  height: 100%;
  width: 1px;
  display: inline-block;
  vertical-align: middle;
}
.col {
  display: inline-block;
  vertical-align: middle;
}

JavaScript

$(function() {
	$('.input-div-message-box').on('click', function() {
  	var input = $(this).parent().parent().find('.input-box').find('input');
    input.val('Hello');
  });
});