Styling search bar with select and button component

[David]

I am learning the Quasar Framework and web developement in general. I would like to have a search bar with a select component and button with search icon similar to amazon.com search bar in desktop. The components are not uniformly integrated in a uniform search bar for me. This is the search bar I want to get:

This is the search bar I got:

Here is my code:

<template>
  <div>  
    <div class="row sm-gutter">
      <div class="bg-white">
        <q-select type="list" v-model="select" :options="selectOptions"></q-select>
      </div>  
      <div class="auto">
        <q-autocomplete>
          <q-search></q-search>
        </q-autocomplete>
      </div>
      <div class="auto">
        <button class="primary">
          <i>search</i>
        </button>
      </div>
    </div>
  </div>
</template>
<script>

// import { Utils, Platform } from 'quasar'
export default {
  data () {
    return {
      select: 'fb',
      selectOptions: [
        {
          label: 'Google',
          value: 'goog'
        },
        {
          label: 'Facebook',
          value: 'fb'
        },
        {
          label: 'Twitter',
          value: 'twtr'
        },
        {
          label: 'Apple Inc.',
          value: 'appl'
        },
        {
          label: 'Oracle',
          value: 'ora'
        }
      ]
    }
  },
  methods: {}
}
</script>

<style lang="styl">
.row
   background rgba(147, 128, 108, .1)
   padding 10px
</style>
```
Thank you
David

[s.molinari]

Hi David,

Could you put your code in three backticks please? See the doc link below for reference.

https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#code

Scott

[David]

Thank you Scott