How to make the coffee image close to the text?example as it should be

how did I manage to do this

.cup {
  float: right;
}

.mbc {
  font-size: 60px;
}

<div >
  <div>
    <div>
      <h1 >Make better<br>coffee<img src="Coffe.png" alt="Coffe image" width="70px" height="67px" ></h1>
      <p>why learn how to blog?</p>
    </div>
    <img src="Croods.png" alt="Croods" width="476px" height="323px">
  </div>
</div>

CodePudding user response：

Right now, float right makes the image always go to the right side. If the image is positioned inline (display: inline, which is the default value), the image would be placed correctly.

<h1>This is<br/>your text<img width="30" style="margin-left: 10px" src="https://hotemoji.com/images/dl/d/coffee-emoji-by-twitter.png" /></h1>