JSFiddle - React, Tailwind, and code Playground

HTML

<div class="select-editable">
  <select onchange="this.nextElementSibling.value=this.value">
    <option value=""></option>
    <option value="115x175 mm">115x175 mm</option>
    <option value="120x160 mm">120x160 mm</option>
    <option value="120x287 mm">120x287 mm</option>
  </select>
  <input type="text" oninput="this.previousElementSibling.options[0].value=this.value; this.previousElementSibling.options[0].innerHTML=this.value" onchange="this.previousElementSibling.selectedIndex=0" value="" />
</div>

CSS

.select-editable {
  position: relative;
  width: 120px;
}

.select-editable > * {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  outline: none;
}

.select-editable select {
  width: 100%;
}

.select-editable input {
  width: calc(100% - 20px);
  margin: 1px;
  border: none;
  text-overflow: ellipsis;
}