Врестка квадрата и заголовка

[Akkord87]

Здравствуйте!

Помоги пожалуйста решить проблему с небольшим куском верстки :)

Пример на картинке.

Я не могу понять, как свертать так, чтобы правая часть границы квадрата не перекрывала заголовок. При этом если заголовок из 1,2,3 строк то квадрат так же подстраивается и растягивается по высоте.

Есть у кого идеи, как можно это реализовать?

[AlexZaw]

Как вариант:

<div class="wrap">
  Наука
  <div class="square">
    <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt obcaecati rem quasi saepe tenetur illo exercitationem dicta explicabo laudantium cumque, expedita voluptate repudiandae perspiciatis culpa suscipit? Necessitatibus nisi qui quaerat!
    </div>  
  </div>
</div>

.square{
  position: relative;
  border-left: 1px solid #000;
}
.square:before, .square:after{
    content: '';
  position: absolute;
  width: 100px;
  height: 1px;
  background: #000;
  left: 0;
}
.square:before{
  top: 0;
}
.square:after{
  bottom: 0;
}
.text{
  position: relative;
  padding: 30px 0 30px 20px;
}
.text:before, .text:after{
  content: '';
  position: absolute;
  height: 20px;
  width: 1px;
  background: #000;
  left: 100px;
}
.text:before{
  top: 0;
}
.text:after{
  bottom: 0px;
}

 

[Akkord87]

Спасибо большое за идею, немного доработал и получилось так, как и задумывалось)))))