Ankhena

1. Абсолютом
2. Флексом, добавив к родителю ::after такой же ширины, как у первого элемента.
3. Гридами. 1fr min-content 1fr

Использовать свойства counter-reset и counter-increment для псевдоэлементов вложенного списка.
Жирность, думаю, сами поставите.

Зачем для этого вообще позиционирование?
https://jsfiddle.net/e1r0zojL/
Или флексами.

Если все таки очень хочется позиционированием, то центр это:

left: 50%;
transform: translateX(-50%);

Вертикальное позиционирование при этом разумнее считать снизу, а не сверху. Вдруг текста будет на 2 строки?

Вы можете
- задать спану

display: inline-block;
vertical-align: top;

- задать их обертке display flexи дальше оперировать align-items
- аналогично гридами

Если вы зададите спану display: block, то он встанет вообще НАД textarea

Просто нарисовать фоновыми градиентами к одному блоку.
https://jsfiddle.net/02hfmet3
Адаптивный и с контентом внутри https://jsfiddle.net/kn3ha48d/

Есть еще вариант с 2мя псевдоэлементами, но подходит только для однотонного фона и фикс ширины. Во-первых, из-за обводки, во-вторых, из-за округления. Если блок будет иметь фикс ширину, то округление не важно, просто нужно скорректировать в зависимости от четности или нечетности.
https://jsfiddle.net/xm91ny4q/

Так вам нужно? https://jsfiddle.net/Ln20rckx/

Простейшая вариация
https://jsfiddle.net/pd7segt0/

Только у себя в head добавьте

<meta name="viewport" content="width=device-width, initial-scale=1.0">

без него @media не будут работать.

Градиентом

Количество введенных символов считайте на js и подставляйте в --color-width

body {
margin: 0
}

Меняется, начните вводить текст и увидите.
Цвет placeholder меняется через псевдоэлемент ::placeholder

P.S. Чтобы по сто раз не писать цвет: белый, можно использовать слово inherit, тогда поля унаследуют цвета от родителя (у вас белый задан форме, от него и унаследуют)

h1 {
  position: relative;
  width: fit-content;
  padding:  0 10px;
}

h1::before {
  content: "";
  position: absolute;
  display: block;
  height: 100%;
  background: #fff;
  animation: foo 3s;
}

@keyframes foo {
  0% {
    left: 0;
    right: 100%;
  }

  50% {
    left: 0;
    right: 0;
  }

  100% {
    left: 0;
    right: 100%;
  }
}

Примерно так

Почему

Потому что float нужно использовать для обтекания одного элемента другим. Например, чтобы картинка обтекалась текстом.
А вовсе не для сеток.

Для сеток придуманы флексы (https://jsfiddle.net/pc4tyex8/) и гриды.
И, кстати, тогда можно будет избавиться от лишних оберток photorow

p.s. margin-left: 170px; не поставит блок по центру страницы. Используйте margin: 0 auto.

Обычное центрирование абсолютов

position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);

Либо родителю, если хочется оставить его в потоке

display: flex;
justify-content: center;
align-items: flex-end;

только убрать нижний padding

linear-gradient в сочетании с calc
css.yoksel.ru/linear-gradients

columns https://webref.ru/css/columns

Заменить неразрывные пробелы на нормальные.
У вас так

<p>The&nbsp;importance&nbsp;of&nbsp;the&nbsp;game&nbsp;for&nbsp;the&nbsp;youngest&nbsp;children</p>

Либо костылями из соседнего ответа.

transform: translateY(-5px)