Как разместить несколько div элементов в разных строках?

Как правильно разделить несколько дивов внутри контейнера, чтобы они располагались каждый на новой строке? В моем коде они слипаются и не могу понять, как разделить их. Мои попытки использования дефолтных методов не дали результатов. Цель - чтобы дивы занимали все строки с первой до четвертой строки во всю высоту контейнера. Вот мой код:

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>

В результате дивы отображаются слишком близко друг к другу.