Расположите кнопки над дном

Question

Я пытаюсь расположить две белые кнопки чуть-чуть (~ 10 пикселей) снизу, оставаясь отзывчивым (т.е. при изменении высоты области просмотра сохраняется положение кнопки относительно нижней части div).Я попробовал flexbox answer и абсолютное / относительное позиционирование, но тщетно.Вот вопрос div:

.item2{
    background-color:#EF5350;
    width:50%;
    padding-left:5%;
    padding-right:5%;
    padding-top:5%;
    box-sizing: border-box;    
    position:relative;
    transition: 0.3s ease all;
}

.slick-prev:before, .slick-next:before{
  color: whitesmoke;
    font-size: 60px;
  margin-top: auto;
    align-self: flex-end;
    transition: 0.3s ease all;  
}

Ссылка на полный код: https://codepen.io/Refath/pen/drMrYW?editors=0100

Answer 1

Сначала мне нужно было переопределить контейнер relative, в котором находятся стрелки.Естественные границы этого контейнера препятствовали закреплению абсолютно расположенных стрелок в нижней части области просмотра.Я сделал контейнер static и затем расположил кнопки рядом с нижней частью следующего наивысшего относительно позиционированного родителя.

.slick-carousel {
  position: static;
}

.slick-prev,
.slick-next {
  transform: none;
  top: inherit;
  bottom: 50px;
}

.slick-prev {
  left: 0;
}

.slick-next {
  right: 40px;
}

CodePen

Answer 2

.item2 {
    display: flex;
    align-items: flex-end;
}

это помогает, но то, что вы делаете с созданием CSS псевдоэлементов, может быть проблемой, это не лучший способ сделать то, что вы хотите