2

I've created a flex container that has a left and a right. The left contains a div that holds some text, while the right holds some text and what should be an icon.

However, I am pushing right over with flex-end, I want it on the end, but I need it to be a flex of column while still pushing the icon to the far right of the div.

For some reason it's getting pushed down and not aligning center while still not aligning the "icon" or little right image to the right below that text.

.container {
  display: flex;
  width: 30%;
}

.container .left {
  display: flex;
  align-items: center;
  flex: 1;
}

.container .left img {
  border-radius: 50%;
  margin-right: 10px;
}

.container .right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
<div class="container">
  <div class="left">
    <img src="https://via.placeholder.com/150">
    <div class="left-text">
      <p>Text Text</p>
      <p>Text Text</p>
    </div>
  </div>
  <div class="right">
    <p>More Text</p>
    <img src="https://via.placeholder.com/20">
  </div>
</div>

This is what I am trying to accomplish.

enter image description here

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Jackson Rose
  • 39
  • 3

1 Answers1

2

You just need to switch the values in two rules.

Instead of this:

.right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

Try this:

.right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;       /* right-align the image */
  justify-content: center;     /* vertically center all content */
}

And also remove the width: 30% constraint on the container.

.container {
  display: flex;
  /* width: 30%; */
}

.container .left {
  display: flex;
  align-items: center;
  flex: 1;
}

.container .left img {
  border-radius: 50%;
  margin-right: 10px;
}

.container     .right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;       /* right-align the image */
      justify-content: center;     /* vertically center all content */
    }
<div class="container">
  <div class="left">
    <img src="https://via.placeholder.com/150">
    <div class="left-text">
      <p>Text Text</p>
      <p>Text Text</p>
    </div>
  </div>
  <div class="right">
    <p>More Text</p>
    <img src="https://via.placeholder.com/20">
  </div>
</div>

Learn more about flex cross-axis alignment here:

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701