How to make div's inline in particular screen by using media queries

I am working on a react project, I am trying to make this project responsive for mobiles, tablets and laptops. Currently, mobile and tablet screens are responsive, but on a laptop screen of size 1024px, the div's are behaving like a display block. However, I want all divs side by side when there is a laptop screen of size 1024px.

How can I achieve this? Here is my code.

This is App.js

import React from 'react';
import './App.css';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faUser } from '@fortawesome/free-solid-svg-icons'


function App() {
  return (
    <div className='container-fluid'>
      <div className='row'>
        <div className='col-12'>
          <div className='content text-center'>
            <h3 className='one'>One million success stories.
            <span className='start'>Start yours today.</span>
            </h3>
          </div>
          <div className='col-12 col-lg-5 main'>
            <input type='text' className='inputtagcommonstyle' placeholder='Enter Skills or job title'></input>
          </div>
          <div className='col-12 col-lg-3 '>
            <select className='inputtagcommonstyle removebackgroundcolor'>
              <option>Select Categories</option>
              <option>Marketing</option>
              <option>Teaching & Education</option>
            </select>
          </div>
          <div className='col-12 col-lg-2 '>
            <select className='inputtagcommonstyle removebackgroundcolor'>
              <option>Select City</option>
              <option>New York</option>
              <option>San Joes</option>
            </select>
          </div>
          <div className='col-12 col-lg-2 '>
            <input type='submit' className='btn' value='Search Job'></input>
          </div>
          <div className='col-12 getstarted'>
            <a href='www.facebook.com'>
              <FontAwesomeIcon icon={faUser} /> Get Started Now
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

This is App.css

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

.one {
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  font-size: 36px;
}

.start {
  display: block;
}

.inputtagcommonstyle {
  height: 50px;
    border-radius: 0;
    padding: 13px 15px;
    font-size: 18px;
    width: 100%;
    color: #555;
}

.removebackgroundcolor {
  background-color: white;
}

@media only screen and (max-width: 768px) {
  .inputtagcommonstyle {
    margin-bottom: 15px;
  }
}

@media only screen and (min-width:768px) and (max-width:1024px) {
}

.btn {
  width: 100%;
  background-color: #263bd6 !important;
    border-radius: 0 !important;
    color: #fff !important;
    border: none;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 700 !important;
    padding: 14px 20px !important;
    font-family: 'Roboto', sans-serif;
}

.getstarted {
  text-align: center;
  margin-top: 50px;
  font-family: 'Roboto', sans-serif !important;
}

.getstarted a {
    border: 3px solid #263bd6;
    padding: 12px 25px;
    color: red;
    font-size: 18px !important;
    font-weight: 700;
    font-family: 'Roboto', sans-serif !important;
    display: inline-block;
}

a {
  transition: 0.3s ease-in-out;
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
}

If anything is unclear or extra informations is needed please comment