Как сделать так, чтобы текст оставался рядом с div

Question

Я пытаюсь, чтобы тексты оставались рядом с div-ами, как это image . Однако, когда я изменяю размер окна, текст находится под div, даже если какой-то текст может поместиться в промежутке . Есть ли способ заставить их остаться вместе? Оба display: inline-block;, и я пробовал word-break: break-all; и overflow-wrap: break-word;, но оба не работают. Кроме того, поплавок влево просто испортил все и подтолкнул все вверх.

h3 {
  position: relative;
  color: var(--font-color);
  font-size: 20px;
  text-transform: uppercase;
  display: inline-block;
  margin-left: 5px;
  word-break: break-all;
  overflow-wrap: break-word;
}

.divider {
  display: inline-block;
  height: 15px;
  width: 2px;
  position: relative border-radius: 30px;
  background: #0099ff;
  margin-left: 35px;
}

<div class="divider"></div>
<h3>global average temperature</h3>

Answer 1

Вы можете использовать структуру flexbox. Благодаря своей структуре элементы в нем будут автоматически встроены в блок. Я проверял это, они не идут снизу вверх в случае любой ширины в данный момент.

Если вы не хотите создавать эту структуру, вы также можете редактировать свой код в соответствии с размерами разрешения с помощью медиазапроса.

CSS:

h3{
     margin-left: 5px;
}

.divider {
    height: 15px;
    width: 2px;
    border-radius: 30px;
    background: #0099ff;
    margin-left: 35px;
}

.container-content {
    display: flex;
    align-items: center;
}

HTML:

<div class="container-content">
   <div class="divider"></div>
   <h3>global average temperature</h3>
</div>