Before Flexbox

Before flexbox, horizontal alignment was achieved using floated elements.

To create a comment module, you’d float the image both the image and content area either to the left or right.

<div class='comment'>
  <div class='profile-image'>
    <img src=''/>
  </div>
  <div class='comment-container'>
  </div>
</div>

.comment {
  clear: both;
}
.comment:after {
  content: '';
  display: table;
  clear: both;
}
.profile-image,
.comment-container {
  float: left;
}
.profile-image {
  width: 50px;
  margin-right: -60px;
}
.comment-container {
  margin-left: 60px;
}
p:first-child {
  margin-top: 0;
}

Using Flexbox

With flexbox, this kind of layout becomes a lot easier.

.comment {
  display: flex;
  flex-direction: row;
}
.profile-image {
  width: 32px;
}
.comment-container {
  flex: 1 1 auto;
}