title: How to align components side by side in tailwind
body: <p>Hello I need to create an interface with tailwind css and vue. I have a filter container and a search bar which should be in different files but should show side by side. I have written the code below and at app.vue I have added a div only for search bar and filter container but still they don't show side by side. Filters are higher and search bar is below filters.
  App.vue</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app" class="bg-gray-200 font-sans flex flex-col min-h-screen"&gt;
      &lt;AppHeader /&gt;
            &lt;div class="container w-full flex flex-wrap mx-auto px-2 pt-8 lg:pt-16 mt-16"&gt;
      &lt;FilterContainer/&gt;
      &lt;SearchBar/&gt;
      &lt;/div&gt;
      &lt;router-view class="flex-grow"&gt;&lt;/router-view&gt;
      &lt;AppFooter /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  import AppHeader from './components/layout/AppHeader';
  import FilterContainer from './components/search/FilterContainer';
  import SearchBar from './components/search/SearchBar';
  import AppFooter from './components/layout/AppFooter';
  
  
  export default {
    name: 'app',
    watch: {
        '$route' (to) {
          document.title = to.meta.title || 'Logzor'
        }
      },
    components: {
      AppHeader,
      FilterContainer,
      SearchBar,
      AppFooter
    }
  
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>SearchBar.vue</p>
  
  <pre><code>&lt;template&gt;
  &lt;!-- Searchbar --&gt;
  
      &lt;div class="w-full lg:w-4/5 p-8 mt-6 lg:mt-0 text-gray-900 leading-normal bg-white border border-gray-400 border-rounded"&gt;
        &lt;input  type="text" v-model="search.search" class="h-16 appearance-none rounded-l w-full py-2 px-2 ml-2 text-gray-700 leading-tight focus:outline-none text-2xl" id="search" placeholder="Search..."&gt;
        &lt;button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-4 px-12 rounded-r "&gt;    SEARCH   &lt;/button&gt;
       &lt;/div&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    props: [
      'search',
    ],
    data() {
      return {
      }
    },
    methods: {
    },
    watch: {
      value() {
        this.$emit('collectSearch', this.search)
      }
    }
  }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  
  &lt;/style&gt;
  </code></pre>
  
  <p>FilterContainer.vue</p>
  
  <pre><code>&lt;template&gt;
  
           &lt;div class="w-full lg:w-1/5 lg:px-6 text-xl text-gray-800 leading-normal"&gt;
              &lt;p class="text-base font-bold py-2 lg:pb-6 text-gray-700"&gt;Filters&lt;/p&gt;
              &lt;div class="block lg:hidden sticky inset-0"&gt;
                 &lt;button id="menu-toggle" class="flex w-full justify-end px-3 py-3 bg-white lg:bg-transparent border rounded border-gray-600 hover:border-purple-500 appearance-none focus:outline-none"&gt;
                    &lt;svg class="fill-current h-3 float-right" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"&gt;
                       &lt;path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/&gt;
                    &lt;/svg&gt;
                 &lt;/button&gt;
              &lt;/div&gt;
  
           &lt;/div&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
  
  }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  
  &lt;/style&gt;
  </code></pre>