JSFiddle - React, Tailwind, and code Playground

HTML

<div class="border"><div class="border-text">Возможно ли технически сверстать блок, нарисованный на картинке?</div></div>
<div class="border"><div class="border-text">Необходимо, чтобы его ширину можно было свободно менять (текст при этом будет занимать разное кол-во строк), а нижняя граница всегда должна заполнять расстояние до текста, но не перечеркивая его. Фон должен быть прозрачным.</div></div>

CSS

html {
    min-height: 100%;
	font-size: 1.5em;
    background: url(http://mykartinka.ru/_ph/14/612409116.jpg) no-repeat 50% 50% / cover;
}
.border {
	position: relative;
	margin: 0 0 1em;
	border: 4px solid #369;
	border-bottom: 0;
}
.border-text {
	overflow: hidden;
	position: relative;
	top: .5em;
	padding: 0 1em;
	margin: 0 -4px;
}
.border:before,
.border-text:after {
	content: "";
	position: absolute;
	bottom: 0;
	height: 4px;
	background: #369;
}
.border:before {
	left: -4px;
	width: .6em;
}
.border-text:after {
	width: 100%;
	margin: 0 0 .5em .4em;
}