Как сделать несколько div не в одну строку?

Question

[wexvellencex]

Добрый день. Пытаюсь разбить несколько дивов, чтобы был каждый с новой строки, но они почему-то слиплись и не могу понять как их разъединить. Они по сути должны занимать с первой по четвертую строку во всю высоту картинки, прогуглил, попробовал дефолтные методы и не сработало

Сам код:
Css

.carts {
                    display: flex;
                    position: absolute;
                    align-items: center;
                    font-size: 12px;
                    font-weight: 400;
                    line-height: 22px;
                    text-align: left;
                }

                .img__carts {
                    width: 96px;
                    height: 146px;
                    border-radius: 5px;
                    margin: 40px 0 0 45px;
                    vertical-align: middle;
                }
                
                .carts__name {
                    font-size: 12px;
                    font-weight: 400;
                    line-height: 22px;
                    text-align: left;
                }

                .carts__size {
                    opacity: 60%;
                }

                .carts__quantity {
                    opacity: 60%;
                }

                .carts__price {
                    text-transform: uppercase;
                    opacity: 60%;
                }

HTML:

<div class="carts">     
    <img class="img__carts" src="#" alt="">
    <div class="carts__name">Name</div>
    <div class="carts__size">Size</div>
    <div class="carts__quantity">One size</div>
    <div class="carts__price">18 700 руб.</div>
</div>

И получается вот так

Comments

[Владислав Лысков]

flex-direction: column
justify-content: space-between

[wexvellencex]

Владислав Лысков, Да но теперь текст не справа от картинки, пытаюсь выравнить, но тоже что-то не так

[Владислав Лысков]

wexvellencex, ну дак вынеси теперь эту картинку из дива и оберни это всё в див с флексом