Как сверстать такой блок?

Question

dmitriu256 @dmitriu256

HTML
CSS

Как сверстать такой блок?

Как сверстать правильно такой блок

Блок - является слайдом для slick-slider
Код блока

<div class="slide-block portfolio-block">
                <!--

                <a href="#" class="slide-block__link portfolio-block__link"></a>
                 -->
                <!-- /.portfolio-block__link -->
                <button class="button button_down slide-block__button portfolio-block__button">
                    <i class="fas fa-chevron-right"></i>
                </button>

                <img src="img/services/room-1.png" class="slide-block__img portfolio-block__img"
                     alt="Дизайн для 2-комнатной квартиры">

               <span class="portfolio-block__price">
                            от 9000 грн.
                        </span>
                <h3 class="portfolio-block__title">
                    Дизайн<br> для  2-комнатной квартиры
                </h3>
                <!-- /.portfolio-block__title -->

               
                <!-- /.portfolio-block__price -->
            </div>

.slide
  &-block
    display: flex!important
    flex-direction: column
    justify-content: space-between
    position: relative
    border-radius: 10px
    border: 1px solid red
    overflow: hidden
    z-index: 5
    &:last-child
      margin-right: 0
    &::before
      display: block
      content: ''
      position: absolute
      top: 0
      left: 0
      width: 100%
      height: 100%
      background-color: rgba(43, 43, 43, 0.69)
      transition: all 0.5s ease
      z-index: -1
    &:hover::before
      background-color: rgba(43, 43, 43, 0.4)

    &__img
      position: absolute
      display: block
      width: 100%
      height: 100%
      top: 0
      left: 0
      z-index: -2
      object-fit: cover

    &__link
      position: absolute
      top: 0
      left: 0
      width: 100%
      height: 100%
.portfolio 
  &-block
    height: 585px
    &__title
      order: 2
      font-size: 24px
    &__price
      padding: 16px
      background: $active-color
      font-size: 22px
      font-weight: 700
      border-radius: 10px
      color: $text-color-dark

При помощи описанных стилей сверстал вот такой блок (ранее был в проекте)

Применил свойство justify-content: space-between для родительского элемента и отлично блоки разошлись на странице

Как пытался решить
1) Через order - меняем местами заголовок и цену не меняя верстку
2) Фиксировал ширину &__price - неподходит, тк текст в строке разный по ширине

3) Или сделать весь родительский блок с display-block
Поменять местами заголовок и цену местами в верстке и задать абсолютное позиционирование заголовку
Итог остановился на 3 варианте

Стили 3 варианта

&-block
    margin: 0 10px
    position: relative
    display: block!important
    height: 585px!important
    &__title
      position: absolute
      width: 95%
      top: 50%
      left: 50%
      transform: translateX(-50%) translateY(-50%)
      text-align: center
      font-size: 24px
    &__price
      display: inline-block
      margin-top: 25px
      padding: 16px
      background: $active-color
      font-size: 22px
      font-weight: 700
      border-radius: 0 10px 10px 0
      color: $text-color-dark