Как сделать текст по центру?

Question

[notequal21]

Не могу придумать, как сделать такой блок:


Нужно, чтобы текст был по центру, при этом справа должна быть кнопка фильтра, также нужна линия, которая ведет от текста к краям экрана.

Пробовал так, но оно не адаптивно, т.е. если поставить другой текст то всё разойдется.

<div class="about-videos__title title">
    <div class="title-arrow">
      םירמאמ לכ
      <img src="./img/icons/arrow.svg" alt="">
    </div>
    <span></span>
    םירחבומ םירמאמ
    <span></span>
  </div>

.title {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  font-size: 36px;
  line-height: 53px;
  color: #346600;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  position: relative;

  &-arrow {
    font-family: 'Heebo';
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 35px;
    color: #FFFFFF;
    margin: 0 0 0 36px;
    display: flex;
    align-items: center;

    @media (max-width:767px) {
      display: none;
    }

    &_mob {
      display: none;
      font-size: 16px;
      line-height: 24px;
      margin: 20px 0 0 0;

      img {
        width: 8px;
      }

      @media (max-width:767px) {
        display: flex;
      }
    }

    img {
      margin: 0 10px 0 7px;
    }
  }

  @media (max-width:767px) {
    font-size: 18px;
    line-height: 26px;
  }

  span {
    display: block;
    flex: 1 1 100%;
    height: 1px;
    background: #D3D3D3;
    position: relative;
    margin: 0 8px 0 0;

    &::before {
      content: '';
      background: #D3D3D3;
      display: block;
      position: absolute;
      top: -4px;
      right: 0;
      width: 42px;
      height: 1px;
    }

    &::after {
      content: '';
      background: #D3D3D3;
      display: block;
      position: absolute;
      right: 0;
      bottom: -4px;
      width: 24px;
      height: 1px;
    }

    &:nth-of-type(1) {
      @media (max-width:767px) {
        flex: 1 1 100%;
      }
    }

    &:nth-of-type(2) {
      margin: 0 0 0 8px;


      &::before {
        right: auto;
        left: 0;
      }

      &::after {
        right: auto;
        left: 0;
      }
    }
  }

  &_singleline {
    span {
      &::before {
        display: none;
      }

      &::after {
        display: none;
      }
    }
  }

  &::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    width: 56px;
    height: 2px;
    background: #FFD600;
  }
}

Comments

[Алан Гибизов]

Ну вы как-нибудь пробовали? Покажите код, пусть неудачный. Иначе вопрос попадает под п.5.12 правил.

[notequal21]

Алан Гибизов, Дополнил