Ка сделать чтобы было как на картинке, чтобы в зависимости от высоты 2-ого снизу поля, 3-е снизу меняло свою позицию.
.categories__items {
display: inline-block;
padding: 0 10px;
}
.categories__items > div {
width: 210px;
height: 290px;
margin: 20px 10px 0 10px;
border: 1px solid grey;
float: left;
padding: 15px;
box-sizing: border-box;
}
.item__image {
width: 180px;
height: 100px;
transform: scale(1.7);
}
.item__number {
font-size: 8px;
}
<div class="categories__items">
<div class="categories__item1">
<p class="item__price">$45.50</p>
<img class="item__image" src="img/tapok.svg" alt="">
<p class="item__male">MEN</p>
<p class="item__name">Converse</p>
<p class="item__number">#3247234</p>
</div>
<div class="categories__item2">
<p class="item__price"></p>
<img class="item__image" src="" alt="">
<p class="item__male"></p>
<p class="item__name"></p>
<p class="item__number"></p>
</div>
<div class="categories__item3">
<p class="item__price"></p>
<img class="item__image" src="" alt="">
<p class="item__male"></p>
<p class="item__name"></p>
<p class="item__number"></p>
</div>
<div class="categories__item4">
<p class="item__price"></p>
<img class="item__image" src="" alt="">
<p class="item__male"></p>
<p class="item__name"></p>
<p class="item__number"></p>
</div>
<div class="categories__item5">
<p class="item__price"></p>
<img class="item__image" src="" alt="">
<p class="item__male"></p>
<p class="item__name"></p>
<p class="item__number"></p>
</div>
<div class="categories__item6">
<p class="item__price"></p>
<img class="item__image" src="" alt="">
<p class="item__male"></p>
<p class="item__name"></p>
<p class="item__number"></p>
</div>
<div class="categories__item7">
<p class="item__price"></p>
<img class="item__image" src="" alt="">
<p class="item__male"></p>
<p class="item__name"></p>
<p class="item__number"></p>
</div>
<div class="categories__item8">
<p class="item__price"></p>
<img class="item__image" src="" alt="">
<p class="item__male"></p>
<p class="item__name"></p>
<p class="item__number"></p>
</div>
</div>