Для реализации данного блока на сайте можно использовать различные способы. Один из наиболее популярных способов - использование сетки Bootstrap или Flexbox для создания колонок.
Что касается разметки в HTML, то обернуть данный блок в тег <main> не является обязательным, но рекомендуется, особенно если контент на странице структурно разделен на основной контент и другие блоки. Тег <main> обозначает основное содержимое страницы.
Тег <header> можно применить для раздела "баланс", так как это является заголовком данного блока. Однако, если данный блок не является заголовком страницы, то можно также использовать другие подходящие элементы, например <div> с подходящим CSS классом.
Пример разметки данного блока может выглядеть следующим образом:
```html
<main>
<header>
<h2>Баланс</h2>
</header>
<div class="balance-container">
<div class="balance-info">
<span class="balance-label">Текущий баланс:</span>
<span class="balance-amount">1000$</span>
</div>
<div class="balance-info">
<span class="balance-label">Последнее пополнение:</span>
<span class="balance-amount">500$</span>
</div>
</div>
</main>
```
В данном примере блок с контентом обернут в тег <main>, а раздел "баланс" помещен внутри <header> блока. Контент блока "баланс" представлен внутри элемента <div> с классом "balance-container", и информация о балансе и последнем пополнении обернуты в элементы <div> с классом "balance-info". Каждая информационная часть состоит из элемента <span> для метки и элемента <span> для суммы.
