Заставить большую строку сделать как меньшую строку (увеличить или уменьшить) [CSS]

Question

У меня проблема с тем, что моя увеличенная строка остается под изображением, когда я уменьшаю масштаб, но меньшие строки («ПЕРВАЯ И ВТОРАЯ») переходят в сторону изображения. Мне нужна помощь, чтобы большая струна действовала как меньшая, поэтому их движение актуально. Большая строка остается внизу и не перемещается в отличие от двух других строк.

h3 {
  color: #323a45;
  font-family: sans-serif;
  border-bottom: 2px dotted #2f7bbd;
  display: inline-block;
  font-size: 22px;
  margin-bottom: 50px;
}

Вот jsfiddle: https://jsfiddle.net/2ou3xt1a/3/

Answer 1

Я рекомендую использовать следующее CSS:

h3 {
  color: #323a45;
  font-family: sans-serif;
  border-bottom: 2px dotted #2f7bbd;
  display: block;
  font-size: 22px;
  margin-bottom: 50px;
}