How to make the type buttons lineup horizontally

Question

I am making a website which I want two elements(sidebar and card group) to sit next to each other, the type buttons in the sidebar in display block, I had successful done that in the laptop view. Now I want to make it mobile responsive, the sidebar and card group are sitting vertically, and the type buttons in the sidebar in display inline-block. I have managed to position the sidebar and card group sitting vertically, but cannot make the type buttons to display on the same line, can someone help me?

.layout-container {
    width:100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin-left: 2rem;
}

.sidebar {
    width:20%;
}

.card-group-user {
    width:80%;
    margin-top: 2rem;
}

.type-button  {
    display: block;
    background-color: rgb(255, 251, 0);
    border-color: rgb(248, 201, 113);
    font-weight: 600;
    height: 35px;
}

@media (max-width: 370px) {
    .layout-container {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
    }

    .type-button {
        display: inline-block;
    }

<div className="layoutContainer">
       <div className='sidebar'>
                    <input className='searchbar' />

                    <div className='all-types-container'>
                        <div className='all-container'>
                            <button className='type-button'>All</button>
                        </div>
                        <div className='types-container'>
                            <h5 className='type-category'>Book type</h5>
                            <button className='type-button'>Comedy</button>
                            <button className='type-button'>Love</button>
                            <button className='type-button'>Horror</button>
                            <button className='type-button'>Detecting</button>
                            <button className='type-button'>Fiction</button>
                            <button className='type-button'>Adventure</button>
                            <button className='type-button'>Action</button>
                            <button className='type-button'>Youth</button>
                        </div>
                        <div className='advanced-types-container'>
                            <h5 className='type-category'>Advanced book type</h5>
                            <button className='type-button'>Popular</button>
                            <button className='type-button'>New release</button>
                        </div>
                    </div>
                </div>

        <div className="card-group-user">
                <div className="container">
                        <div className="row row-cols-3">
                        </div>
                        
                 </div>
        </div>
</div>

It works when I set the sidebar's width at 20% and the card group's width at 80% in laptop view. But in mobile view, I moved the card group underneath the sidebar, I want the sidebar's width to be 100% and the type buttons to be inline-block, but it does not do anything.

Answer 1

You have some typo, that I've fixed. I think you want to achieve this layout. Am I right?

* {
    margin: 0;
    padding: 0;
}

.layout-container {
    width:100%;
    display: flex;
    flex-wrap: wrap;
    padding: 0 2rem;
}

.sidebar {
    width:20%;
}

.card-group-user {
    width:80%;
    margin-top: 2rem;
}

.type-button  {
    display: block;
    background-color: rgb(255, 251, 0);
    border-color: rgb(248, 201, 113);
    font-weight: 600;
    height: 35px;
}

.searchbar{
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 370px) {
    .layout-container {
        flex-direction: column;
    }

    .sidebar {
        width:100%;
    }

    .card-group-user {
        width:100%;
        margin-top: 2rem;
    }
  
    .types-container{
      display: flex;
      max-width: 100%;
      overflow-y: auto;
    }

    .type-button {
        display: inline-block;
    }
}

<div class="layout-container">
    <div class="sidebar">
        <input class="searchbar" />

        <div class="all-types-container">
            <div class="all-container">
                <button class="type-button">All</button>
            </div>
      <h5 class="type-category">Book type</h5>
            <div class="types-container">
                <button class="type-button">Comedy</button>
                <button class="type-button">Love</button>
                <button class="type-button">Horror</button>
                <button class="type-button">Detecting</button>
                <button class="type-button">Fiction</button>
                <button class="type-button">Adventure</button>
                <button class="type-button">Action</button>
                <button class="type-button">Youth</button>
            </div>
            <div class="advanced-types-container">
                <h5 class="type-category">Advanced book type</h5>
                <button class="type-button">Popular</button>
                <button class="type-button">New release</button>
            </div>
        </div>
    </div>

    <div class="card-group-user">
        <div class="container">
            <div class="row row-cols-3"></div>
        </div>
    </div>
</div>