JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <input type="text" v-model="message" @focus="showSelect()" @blur="showSelect()">
  <br>
  <select ref="select" name="" id="selectBox">
    <option value="car">Car</option>
    <option value="clothes">Clothes</option>
    <option value="boat">Boat</option>
    <option value="bike">Bike</option>
    <option value="jewellery">Jewellery</option>
  </select>
</div>

CSS

input{
  z-index: 10;
  position: fixed;
  display: block;
}
select{
  /* margin-top: -18px; */
  display: block;
}

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    message: '',
    selectVisibility: false
  },
  methods: {
  	showSelect() {
    	this.selectVisibility = !this.selectVisibility;
      this.$refs.select.focus().click();
    },
  }
})