Как сделать колонки css?

Для длинного текста используйте многоколонную раскладку:

.article { columns: 2 18rem; column-gap: 2rem; }

Здесь указан желаемый размер колонки и ограничение количества. Браузер распределит содержимое последовательно: сначала вниз по одной колонке, затем в следующую. Если доступной ширины недостаточно для двух колонок, останется одна. Делить письмо на отдельные HTML-блоки по месту визуального разрыва не нужно, поэтому редактирование текста не заставит вручную переносить его куски.

Свойство column-gap задает промежуток, а column-rule позволяет нарисовать разделитель внутри этого промежутка. Для заголовка, который должен занимать всю ширину, можно рассмотреть column-span: all на соответствующем элементе. Если подпись и иллюстрацию желательно держать вместе, сгруппируйте их и используйте break-inside: avoid, помня, что слишком большой фрагмент все равно может потребовать разрыва или выйти за ограничения.

У газетного потока есть особенность чтения: человек проходит колонку до конца и затем возвращается к началу соседней. На очень длинной странице это неудобно, поэтому не делайте непрерывные колонки высотой в несколько экранов без проверки. На телефоне один столбец обычно проще. Можно ограничить многоколонное оформление отдельной секцией или добавить медиазапрос, возвращающий column-count: 1 на узкой ширине.

Если же вам нужны два независимых блока, например текст слева и список документов справа, используйте Grid или Flexbox. В них элементы остаются отдельными областями. Свойство columns предназначено прежде всего для перетекания общего содержимого и не заменяет всякую сетку страницы.