How to align text to the right side of an img without using float:left so it wont change the default parent div height

Question

How to I align text to the right side of the image icon like the one in the example picture.

I would usually use "float:left" but it's for a mobile responsive design so I prefer not using things like "float:left" because it ruins the red divs height with responsive designs.

I have to align the title, subsitle and a little square image.

Answer 1

It is easy to use float: left and NOT break the height of red border div.

You only have to add display: table-cell to the .app_top block. Here's the solution:

.app_top {
    display: table-cell;
}
.app_top img {
    float: left;
}

See the working example. Here's the code.

Answer 2

You could use display: inline-block instead.

#main-container {
  border: 5px solid #3F3F3F;
  width: 270px;
}
.container {
  width: 250px;
  height: 200px;
  border: 5px solid #7F0008;
  margin: 5px;
}
.box {
  display: inline-block;
  vertical-align: top;
  width: 85px;
  height: 85px;
  background: #446C74;
  margin: 5px;
}
.content {
  display: inline-block;
  vertical-align: top;
}
.title, .sub-title {
  margin: 0;
  padding: 3px 10px 3px 0;
}
.title {
  font-size: 17px;
  font-weight: bold;
}
.sub-title {
  font-weight: bold;
  color: #3F3F3F;
}
.img {
  background: url(http://placehold.it/100/25);
  width: 100px;
  height: 25px;
  border: 5px solid #EBEAAE;
}

<div id="main-container">
  <div class="container">
    <div class="box">
    </div>
    <div class="content">
      <p class="title">Title</p>
      <p class="sub-title">Sub-Title</p>
      <div class="img"></div>
    </div>
  </div>
  <div class="container">
    <div class="box">
    </div>
    <div class="content">
      <p class="title">Title</p>
      <p class="sub-title">Sub-Title</p>
      <div class="img"></div>
    </div>
  </div>
</div>