Вопрос по вёрстке

А какие ширины должны быть у блоков? Если использовать Бутстрап, то все просто.

Там проценты -- как учили) Для наглядности я адаптивности не добавлял.

Ну так оно и есть. Смотри пример по ссылке.

Можно через абсолютное позиционирование. Минут за 15 с десяток вариантов получится)

Надо четко объяснять как это должно работать. Сама по себе задача "один блок по центру, второй справа" примитивная.

"А втыкать что-то" надо вне родителя. Иначе ты нарушаешь условия задания.

Про маленькие разрешениям: если места не хватает, его и не будет хватать. Либо в столбик, либо скрывай, либо отсекай часть. Таков путь. Так работает адаптивная верстка.

Добавлено 4 минуты спустя:

#134 Kabak:

Вот так вот работает

     <div class="header_left_middle">
      <span class="span_left">{PAGE_ROW_DATE_STAMP|cot_date('date_full', $this)}</span>
      <div class="middle_title"><a href="{PAGE_ROW_URL}">{PAGE_ROW_SHORTTITLE}</a></div>
     </div>

.header_left_middle {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
    font-size: small;
    display: flex;
    width: 100%;

.span_left
{
  position: absolute!important;
  width: auto !important;
}

.middle_title
{
  text-align: center;
}

А зачем ты родителю назначаешь 100% ширину и отрицательные поля? Зачем ему флекс если один потомок блочный на всю ширину, а второй имеет абсолютное позиционирование? Почему у родителя в таком случае отсутствует position: relative???

1. Если ты используешь абсолютное позиционирование, то элемент, относительно которого оно используется, должен иметь position: relative
2. 100% ширина и явно указанные margins, особенно отрицательные, плохо сочетаются
3. Четко сформулируй вопрос чтобы получился пример, работающий на всех разрешениях

Из того, что понял я, вот адаптивный вариант на флексе с "втыканиями". Из творчества -- только уменьшенный шрифт для блока с датой на "смартфонном" разрешении.

А вот вариант с абсолютным позиционированием. Не втыкалось (или втыкалось) у тебя именно из-за отсутствия position: relative у родителя.