Positioning Divs On Top Of An Image That's Utilizing The Flex Css Property

For a web application, I'm to position an animated emoji along with some text in a div. These elements are to remain separated in a fully responsive way. Behold: I'm using flex to

Solution 1:

To accomplish that you need a wrapper around the image and text, that take the size of the image.

Here is a sample code, where I added an extra wrapper, image, around the anim, and then made the anim display as inline block.

Here the image wrapper become the flex item instead, and will allow the anim to behave and be sized as the image, and create the boundaries you need to be able to place the eyes at a fixed position on top the image.

Stack snippet

.act {
  display: flex;
  flex-wrap: wrap;
  background-color: #E1F5FE;
  padding: 10px;
  border-radius: 10px;
  align-items: center;
}

.image {
  flex: 11;
  min-width: 64px;
  text-align: center;
}

.anim {
  display: inline-block;
  position: relative;
}

.anim>img {
  width: 100%;
  max-width: 50px;
}

.txt {
  flex: 11180px;
  text-align: center;
}

.tear {
  position:absolute;
  top: 10px;
  left: 30px;
  width: 10px;
  height: 10px;
  background: blue;
}
.tear:first-child {
  left: 10px;"
}

<divclass="act"><divclass="image"><divclass="anim"><divclass="tear"></div><divclass="tear"></div><imgsrc="http://placehold.it/150"></div></div><divclass="txt">
    Some text
  </div></div>