JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<body>
<div class="wrap">
    <select>
      <option value="orange">Orange</option>
      <option value="blue">Blue</option>
      <option value="red">Red</option>
      <option value="white">White</option>
    </select>
    <input value="Orange" />
</div>
  
</body>

CSS

.wrap {
    position: relative;
    border: 1px solid #ccc;
    height: 21px;
    border-radius: 4px;
}

.wrap select {
    opacity: 0;
    position: absolute;
    top: -3px;
    left: -3px;
    z-index: 1;
}

.wrap input {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 2px;
    z-index: 2;
    border: 0;
}

.wrap:after{
    content: "\25BE";
    font-size: 1.5em;
    position: absolute;
    right: 0;
    top: -3px;
    z-index: 0;
}

JavaScript

$(".wrap").width($(".wrap select").width());
$(".wrap input").width($(".wrap select").width() - 20); //size of arrow + padding
$(".wrap select").on("change", function () {
    var txt = $(this).find(':checked').text();
    $(".wrap input").val(txt);
});