Long heading text results in empty gap - css

Question

Currently my movie heading code looks like this:
.moview-info h1 {
color: #fff;
margin: 0 0 15px 0;
font-weight: normal;}
And I tried adding these lines:
display:block;
word-wrap: break-word;
max-width: 700px;
It fixes the issue partly, because when I'm shrinking my browser window, the star rating causes the heading go up and not overlap. Is there any way to fix this issue besides not displaying star rating?
Rating star code:
position: absolute;
left: 50%;
margin-left: -70px;
font-size: 130px;
width: 140px;
height: 140px;
line-height: 140px;
short title long title

Answer 1

This styling is usually done with { display: flex; justify-content: space-between; } as the CSS of the parent element of the title and the star. Demo below (the JS is just to animate the text):
const titleElt = document.querySelector('#title');
let titleValue = '';
setInterval(() => {
if (titleValue.length>70) {
titleValue = '';
} else {
titleValue += Math.floor(10*Math.random());
}
titleElt.innerHTML = titleValue;
}, 100);
body {
margin: 0;
font-size: 2em;
}
header {
display: flex;
justify-content: space-between;
width: 100%;
}
#title {
width: 90%;
word-wrap: break-word;
}
#star {
width: 10%;
}
<header>
<div id="title"></div>
<div id="star">⭐</div>
</header>