horizontal alignment with css

Question

How do I let the 'title' align with the icon without the need to place the 'title' inside any div.

.card-blue,
.card-red,
.card-green,
.card-grey,
.card-yellow {
  position: relative;
  width: 300px;
  border-radius: 4px;
  background: #FFFFFF;
  margin: 10px auto;
  overflow: hidden;
  padding: 0 0 50px 0;
}

.card-grey {
  border: 1px solid #484848 !important;
}

.card-blue {
  border: 1px solid #0091FF !important;
}

.card-red {
  border: 1px solid #f65314 !important;
}

.card-green {
  border: 1px solid #34a853 !important;
}

.card-yellow {
  border: 1px solid #fbbc05 !important;
}

.card-red-head,
.card-blue-head,
.card-green-head,
.card-grey-head,
.card-yellow-head {
  padding: 10px;
  color: #FFFFFF;
}

.card-grey-head {
  background: #484848;
}

.card-blue-head {
  background: #0091FF;
}

.card-red-head {
  background: #f65314;
}

.card-green-head {
  background: #34a853;
}

.card-yellow-head {
  background: #fbbc05;
}


/* Mobile */

@media only screen and (max-width: 550px) {
  .card-blue,
  .card-red,
  .card-green,
  .card-grey,
  .card-yellow {
    width: 95%;
  }
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="card-red">
  <div class="card-red-head">
    <i class="material-icons">delete</i> TÍTULO
  </div>
  <div class="container-body">
    texto
  </div>
</div>

Answer 1

Complementing our friend Localhost’s response, I would do so:

.box{
  display: block;
  border: 1px solid #e67e22;
  font-family: sans-serif;
}

.box-header{
  background-color: #e67e22;
  padding: 0 15px;
}

.box-header i, .box-header p{
  color: #fff;
  display: inline-block;
  vertical-align: middle;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="box">
  <div class="box-header">
    <i class="material-icons">delete</i> 
    <p>Título</p>
  </div>
  <div class="box-content">
    <p>texto</p>
  </div>
</div>

The secret is to leave the elements children of box-header with the display: inline-block after children working online just align vertically with vertical-align: middle with this technique we do not need to work with float which was originally created to align images in text, and also avoids using those clear: both

Answer 2

Is that it? I tagged it <a> and the icon and title within it. And in css, I added the following line .card-red-head i{ margin-top:-4px;float:left; }. That in the case formats the positioning of the icon in relation to the text. I hope to have helped, any comment doubt there!

.card-blue,
.card-red,
.card-green,
.card-grey,
.card-yellow {
  position: relative;
  width: 300px;
  border-radius: 4px;
  background: #FFFFFF;
  margin: 10px auto;
  overflow: hidden;
  padding: 0 0 50px 0;
}

.card-grey {
  border: 1px solid #484848 !important;
}

.card-blue {
  border: 1px solid #0091FF !important;
}

.card-red {
  border: 1px solid #f65314 !important;
}

.card-green {
  border: 1px solid #34a853 !important;
}

.card-yellow {
  border: 1px solid #fbbc05 !important;
}

.card-red-head,
.card-blue-head,
.card-green-head,
.card-grey-head,
.card-yellow-head {
  padding: 10px;
  color: #FFFFFF;
}

.card-grey-head {
  background: #484848;
}

.card-blue-head {
  background: #0091FF;
}

.card-red-head {

  background: #f65314;
}
 .card-red-head i{ margin-top:-4px;float:left; }
.card-green-head {
  background: #34a853;
}

.card-yellow-head {
  background: #fbbc05;
}


/* Mobile */

@media only screen and (max-width: 550px) {
  .card-blue,
  .card-red,
  .card-green,
  .card-grey,
  .card-yellow {
    width: 95%;
  }
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="card-red">
  <div class="card-red-head">
    <a><i class="material-icons">delete</i>TÍTULO</a>
  </div>
  <div class="container-body">
    texto
  </div>
</div>