Павел Корнилов

Так?
https://codepen.io/KorniloFF/pen/GPbEam

Так? https://codepen.io/KorniloFF/pen/EGwpRL

<style>
	.in {
		position: relative;
		top: 1em;
	}
	.minimal {
		position: relative;
		top: 2em;
	}
</style>

<h2 class="heading">Work <span class="in">in</span> <span class="minimal">minimalism</span></h2>

Знаю, что не 100%, но допиливать нужно в этом направлении:
https://codepen.io/anon/pen/NXbmoV

Яваскриптом пробегать строки и каждой последующей добавлять пробел впереди.

А так без развратов:
https://codepen.io/anon/pen/yzLxKO
=)

<style>
	.err {font-size: 150%; color:red;}
</style>
<input onblur="valid(this);">
<script>
	function valid (el) {
		if(!el.value.trim().length) {
			el.value= 'Это обязательное поле';
			el.classList.add('err');
		} else el.classList.remove('err');
	}
</script>

Чтобы не использовать !important переопределяющее правило должно быть объявлено после переопределяемого правила, либо должно иметь более высокий приоритет. Про приоритеты записей гугли, простой пример:
#caption {...}
.caption {...}

Дся элемента
<div id=caption class=caption>...</div>
первое правило переопределит второе, поскольку у него более высокий приоритет.

Еще вариант - сверстать обычным дивом с фоновым изображением стрелки. А по клику показывать скрытую часть.