Positioning an image on top of text

Issue

How can I position an image on top text. Like in the image given

Solution

Here is a basic example using flex. I put a border on the div so you can see exactly what the flex does. Also, for an example like this where you want the image to be directly over text, you have to lookout for default margins/padding. For example, the <p> element has a default margin which I set to 0.

.row {
  display: flex;
  flex-direction: column;
  border: solid 1px black;
  width: 200px;
  height: 80px;
  padding: 20px;
  background-color: #1e3f5a;
}


p {
  margin: 0; /* removes default p margin */
  text-align: center;
  font-size: 30px;
  color: white;
}

img {
  align-self: flex-end;
  margin-right: 1.5rem; /* optional */
}

<div class="row">
  <img src="https://dummyimage.com/55x25/ed7014/fff&text=Trending">
  <p>Dex Activity</p>
</div>

Answered By - カメロン