JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
      <span class="label">Select Text</span>
    <span class="box"><input type="text" name="data" class="datatext" id="datatext"><select class="contentselect" id="contentselect"><option></option><option value="one">test1</option><option value="two">test2</option></select></span>
    </div>

CSS

.row {
        float: left;
        width: 50%;
    }
        
    .label {
        float:left;
    }

    input.datatext {
        BORDER-TOP: #000000 1px solid; 
        BORDER-LEFT: #000000 1px solid; 
        COLOR: #000000; 
        BORDER-BOTTOM: #000000 1px solid;
        height:18px;
    position:relative;
    left:3px;
    }
    select.contentselect {
        position:absolute;
        BORDER-TOP: #000000 1px solid; 
        height:20px;
        COLOR: #000000; 
        BORDER-BOTTOM: #000000 1px solid;

        border-left:none;
    }

JavaScript

textfield = document.getElementById("datatext");
contentselect = document.getElementById("contentselect");

contentselect.onchange = function(){
        var text = contentselect.options[contentselect.selectedIndex].value
         if(text != ""){
             textfield.value += text;
         }
    }