How to have text stay next to div - html

Question

I'm trying to have texts stay next to divs like this image. However, when I resize the window, the text is under the div even though some text could fit between the gap. Is there any way to make them stay together? Both are display: inline-block;, and I have tried word-break: break-all; and overflow-wrap: break-word; but both don't work. Also, float left just messes up the whole thing and pushes everything up.
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

You can use the flexbox structure. Due to its structure, the elements in it will be inline-block automatically. I've tested it, they don't come bottom to bottom in the case of any width at the moment.
If you don't want to build this structure, you can also edit your code according to the resolution sizes with media query.
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>