I am currently working on project where I want to implement a horizontal scrollbar above a normal one

I managed to actually do it with this (horizontal one – vertikal one works fine):
HTML

<div class="wrapper">
    <div class="item">b</div>
    <div class="item">b</div>
    <div class="item">b</div>
    <div class="item">b</div>
    <div class="item">b</div>
    <div class="item">b</div>
    <div class="item">b</div>
    <div class="item">b</div>
    <div class="item">b</div>
</div>[[[enter image description here](https://i.sstatic.net/pECzlvfg.jpg)](https://i.sstatic.net/7AB0cpRe.jpg)](https://i.sstatic.net/itT59I8j.png)

CSS

.wrapper
{
    max-height: 120px;
    border: 1px solid aqua;
    display: flex;
    overflow-x: auto;
    
}

.wrapper .item
{
min-width: 110px;
height: 110px;
line-height: 110px;
background-color: blue;
margin-right: 1px;
}

But my issue now is that I cant manage to let it look like the vertikal items

This is my code vor the vertikal items:
HTML

<ul>
    <li *ngFor="let p of plants">
        <a routerLink="/detail/{{p.id}}"></a>
        <img [src]="p.imageUrl[0]">
        <div class="content">
        <div class="name">
            {{p.name}}
        </div>
        <div class="rating">
            <span class="star">⋆</span> {{p.rating}}
        </div>
        <div class="detail">
            {{p.price | currency}}
        </div>
    </div>
    </li>
</ul>

CSS

ul
{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    list-style-type:none;
    padding: 0;
}

li a
{
    height: 12.5rem;
    width: 10rem;
    border: 1px solid violet;
    border-radius: 1rem;
    margin: 0.5rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: darkolivegreen;
}

li a:hover
{
    opacity: 0.9;
    cursor: pointer;
}

li a img
{
    object-fit: cover;
    height: 14.5rem;
}

.content
{
    margin-top: 0.3rem;
    margin-left: 1rem;
    padding: 0.5r 1rem;
    position: relative;
    height: 7rem;
    background-color: aqua;
}

When I try to just copy this the code for my vertikal scrollbar it looks weird and the items are aligned underneath instead of next to each other