Break h2 title instead of moving image - html

Question

So I have a box on my website, which has a title and an image to the right. The issue is that when the width of the screen is too small the image gets pushed down. Instead what I want is that the title breaks to a new line.
I've tried using maxwidth on the h2, and various other options with display, width and position but I can't get it to work. I feel like there should be a trivial solution, but I haven't been able to find it.
HTML
<div class="projects-container">
<h2>Title that gets too long</h2><img src="img/ddicon.jpg" width="30px">
<div id="website">
<p>I like to build websites, I would like to be better at it. So then this happened.</p>
</div>
</div>
CSS
.projects-container {
border: 5px solid black;
border-radius: 20px;
padding: 10px;
margin-bottom: 20px;
}
.projects-container > h2 {
margin: 5px 0px;
display: inline;
}
.projects-container > img {
float: right;
}

Answer 1

You will need to make 2 simple changes.
1- Place <img> first in HTML.
<div class="projects-container">
<img src="img/ddicon.jpg" width="30px">
<h2>Title that gets too long</h2>
</div>
2- Remove display: inline and add overflow: hidden:
.projects-container > h2 {
margin: 5px 0;
overflow: hidden;
}
As you are using float on child elements, so don't forget to set layout of parent element. There are many ways of setting layout. For example:
.projects-container {
overflow: hidden;
}
Or
.projects-container:after {
display: block;
clear: both;
content: '';
}
.projects-container {
border: 5px solid black;
border-radius: 20px;
padding: 10px;
overflow: hidden;
margin-bottom: 20px;
}
.projects-container > h2 {
margin: 5px 0px;
overflow: hidden;
}
.projects-container > img {
float: right;
}
<div class="projects-container">
<img src="img/ddicon.jpg" width="30px">
<h2>Title that gets too long</h2>
<div id="website">
<p>I like to build websites, I would like to be better at it. So then this happened.</p>
</div>
</div>

Answer 2

width add with calc function
.projects-container > h2 {
margin: 5px 0px;
display: inline-block;
width:calc(100% - 35px);
}
https://jsfiddle.net/sjmxd9f4/