How align a image and avoid text below in title using HTML CSS

Question

I would like to create a page header with a icon. However sometimes the page titles becomes too big and wrap to another line.

for now my result is:

but I would like to get this result (photoshoped)

Important! the icon must be aligned to the first line, like above picture.

Here is my HTML code:

<div class="page-header">
<div class="header-icon"><img src="to_do.png"></div>
<h1  class="page-title" >Não está em aula <small>2016-02-14  14:04</small></h1>
</div>

Here is my CSS

.page-header .header-icon{
    display: inline-block;
    vertical-align: middle;
    padding-right: 10px;
}

.page-header .page-title{
    display: inline;
    vertical-align: middle;
}

Answer 1

You can define a bigger height for the icon. For this you have to add float:left and a fixed defined height in the .header-icon class.

For example like this:

.page-header {
  width: 400px;
}
.page-header .header-icon {
  display: block;
  vertical-align: middle;
  padding-right: 10px;
  float: left;
  height: 100px;
}
.page-header .page-title {
  display: inline;
  vertical-align: middle;
}

<div class="page-header">
  <div class="header-icon">
    <img src="http://placehold.it/30x30">
  </div>
  <h1 class="page-title">Não está em aula <small>2016-02-14  14:04</small></h1>
</div>

Alternatively you can use padding-bottom for the .header-icon class.