Ankhena

Вот так: https://jsfiddle.net/qe1g2Ljv/

p {
  display: inline-block;
  width: 30%;
  font-size: 1rem;
}
p:not(:nth-child(3n)) {
  margin-right: 3%;
}

БЭМ
flex order
Остальное можно сказать только видя эти вариации.

Высота div по умолчанию считается по содержимому. Ну и еще у вас задана минимальная высота. Соответственно, пока контента меньше, чем на 450px, высота блока будет одинаковой и равной этим 450px.

Либо содержимое float или абсолюты или что-то в таком роде.

Если высота считает не так, значит вы показали не все стили, влияющие на этот элемент.

slick
и media условия для разного позиционирования содержимого и точек-листалок

Варианты:
1. В обычном состоянии задавать прозрачную (transparent) границу той же толщины.
border: 2px solid transparent;
2. Задавать подчеркивание не с помощью border, а с помощью ::after и позиционирования.
3. Задавать box-sizing: border-box и высоту. Плохой способ, во-первых, высоту вообще вредно задавать, во-вторых, может плавать вертикальное центрирование.
4. Вместо border задавать фон линейным градиентом с четкой границей.

background: linear-gradient(to top, red 2px, transparent 3px)

В вашем случае, я бы выбрала 1ый или 4ый варианты.

Скругленные углы это border-radius ;)
https://webref.ru/css/border-radius

В вашем случае у псевдоэлементов.

display table

Дальше с вашим кодом.

Поисковики и не обещали отображать description в снипете. Если есть нужная фраза в контенте, то в сниппет попадет она.

https://webref.ru/css/background-origin

Да, можно

1. border-radius и box-shadow
2. фоновый градиент с четкими границами и под нужным вам углом