Will use CSS to center the content and add additional content to the right of the div

Question

How can I display the content in the center of the div and the icon on the right side. The content currently given is as follows:

But I want it to be like this:

The above 50% notifications are in the center of div, and the pencil icon is on the right.

.w-100 {
  width: 100%;
}

<div class="w-100">
  <p>{value}</p>
  <img src="https://via.placeholder.com/50" />
</div>

Answer 1

You can use Flexbox to achieve this...

.w-100 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.img-icon {
  align-self: end;
}

  
{value}