andand44

Если просто, то так. Использовать gap

.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 20px;
}

Можно так https://jsfiddle.net/k6ecgonr/
Но лучше так, если адаптивность нужна https://jsfiddle.net/qg0y5dko/

Вёрстка email делается с помощью таблиц. Воспользуйтесь фреймворком https://mjml.io/
Так будет более предсказуемый результат.

Плавная анимация будет, если анимировать правило top. Изначально top не задан у .block-criteria label, поэтому нечего анимировать.

Исправленный код с плавной анимацией. Убран bottom, добавлен top

.block-criteria label {
    font-size: 14px;
    color: #c4c4c4;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    cursor: pointer;
}

.block-criteria__form:focus + label {
    font-size: 12px;
    bottom: initial;
    top: -20px;
    transition: all 0.3s ease-out;
}

Нужно использовать clearfix. Есть разные варианты.
https://codepen.io/andand44/pen/QWgNMob
Ну или не использовать float, а использовать современные подходы для таких задач

Нужен overflow: auto;

#sidebar {
    width: 25%;
    height: 100%;
    background-color: #5b1616;
    overflow: auto;
}

#content {
    width: 75%;
    height: 100%;
    background-color: black;
    overflow: auto;
}

https://css-tricks.com/full-width-containers-limit...
Например, так

.background {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

Нужна дополнительная обертка для текста. span подойдет в данном случае
https://jsfiddle.net/hyg2q64c/

.dots-background {
    background-image: radial-gradient(#212121 20%, #e53935 20%);
    background-position: 0 0;
    background-size: 10px 10px;
    height: 200px;
    width: 100%;
}

Размер точек регулируется с помощью background-size на глаз.
Пример https://jsfiddle.net/znaum36v/

Нужно отменить правило с top. top: auto;

.menu-burger-line_third {
    bottom: 0;
    top: auto;
}

Через before, after. В них можно выводить текст из html кода с помощью data атрибутов
https://jsfiddle.net/va82t9qx/

.text-code:hover + .text-info{
  opacity: 1;
}

https://jsfiddle.net/tqvmdyo5/

Адаптивной это значит на всю высоту экрана? vh прекрасно работает
https://codepen.io/andand44/pen/RwVXBBW

Растянутый блок, который находится в фиксированном по ширине контейнере, на всю ширину экрана
https://codepen.io/andand44/pen/NWjQGNb