Как приклеить диагональную линию (адаптивно) к отцентрованному блоку с помощью HTML, CSS, JS?

Question

[Марина Лебедева]

Имеется отцентрованный блок (title, very long description, feedback), к нему необходимо приклеить линию, чтобы она была прикреплена к краю блока (как на картинке).
На данный момент реализовано с after/before. Адаптив нормально не выстраивается.
подскажите варианты решения.

Реализованный код ниже:

<div class="container content-block">
  <div class="wrap-header-block">
    <header class="page-title">
      <hgroup>
        <div class="title-wrap">
          <h1><span class="line"></span>title</h1>
          <div class="wrap-inner">
            <h2>very long title</h2>
            <div class="button">
              <a href="#">feedback</a>
            </div>
          </div>
        </div>
      </hgroup>
    </header>
  </div>
</div>

span.line {
  position: absolute;
  top: 0;
  width: 100%;
}
span.line:after {
  content: '';
  width: 1000px;
  height: 90vh;
  background-color: #fff;
  position: absolute;
  z-index: 1;
  top: 0;
  -moz-transform: rotate(45deg) translate(-96%, 28%);
  -webkit-transform: rotate(45deg) translate(-96%, 28%);
  -o-transform: rotate(45deg) translate(-96%, 28%);
  -ms-transform: rotate(45deg) translate(-96%, 28%);
  transform: rotate(45deg) translate(-100%, -5%);
  left: 25%;
  margin-left: 0;
  border-right: 1px solid #000;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
span.line:before {
  content: '';
  width: 10px;
  height: 10vh;
  background-color: transparent;
  position: absolute;
  z-index: 1;
  top: 0;
  -moz-transform: rotate(45deg) translate(-25%, -10%);
  -webkit-transform: rotate(45deg) translate(-25%, -10%);
  -o-transform: rotate(45deg) translate(-25%, -10%);
  -ms-transform: rotate(45deg) translate(-25%, -10%);
  transform: rotate(45deg) translate(0%, -25%);
  left: 21%;
  border-right: 1px solid #000;
}

Comments

[Ярослав Иванов]

Jsfiddle

[Марина Лебедева]

Ярослав Иванов: https://jsfiddle.net/mdc1a2wc/