indenger20

Либо использовать flexbox

либо на <p> вешать абсолютное позиционирование

но тогда родителю нужно задать нижний паддинг значением высоты параграфа, что бы заголовок не наезжал и родитель не схлопнулся

Нужно смотреть, почему появляется скролл.

Может слова не переносятся на новую строчку

Вы совершенно правы, здесь я лохонулся :)

И все-таки я бы не советовал использовать em, так как если захотите поменять базовый размер шрифта, то и брекпоинты сместятся.

Не обязательно в пикселях задавать, в данном случае 40em означает, ширина 40% от окна браузера.

Почитай о css Masking

тут, а здесь некий генератор

Что значит не выводится?

там в инпут записывается значение и текст, посмотрите внимательней

По-видимому как-от так https://jsfiddle.net/1xtshzok/

Для инпута фикс ширину и для лейбла фикс.

form {
	font-size: 0; // убрать пробелы
}
input {
	width: 20px;
	display: inline-block;
	vertical-align: middle;
}
label {
	width: calc(100% - 20px);
	display: inline-block;
	vertical-align: middle;
	padding-left: 10px;
        font-size: 14px;
        box-sizing: border-box;
}

Я имел ввиду, что динамически созданный скрипт, можно поместить куда угодно.

А тот, который создает его, вы правы, нужно обернуть, перед тем как в head отправлять.

Весь код, который в условии, будет исполняться при ширение меньше 1024px

его можно поместить куда угодно

<script>
	var windowW = document.documentElement.clientWidth; // узнали ширину окна браузера
	var myDiv = document.getElementById('myBlock'); // выбрали элемент по id
	if ( windowW < 1024 ) {
		var elem = document.createElement('script'); //создали тег
		elem.setAttribute('src', 'main.js'); // вписали путь
		myDiv.appendChild(elem); //вставили в тег с идентификатором myBlock
	}
</script>

А может я вас не правильно понимаю..