I am trying to align text and image right next to each other horizontally but the part the image always gets out of span

I am trying to put image at right of the text but it always get cropped out of the container html/css is:

body {
  background-color: #1e4bdd;
  background: linear-gradient(105deg, #f2eeee, #0808d4);
}

.container {
  text-align: justify;
  background-color: #ffffff;
  font-size: 16px;
  padding: 01.5em 1.8em;
  width: 90vw;
  max-width: 100em;
  position: relative;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  border-radius: 0.6em;
  background: linear-gradient(55deg, #940ce9, #a88bc9);
}

.image {
  border-radius: 50%;
  border: #1e4bdd;
  float: center;
}

<div class="seacrh">
  <h2> Meal app by Garvit <img class="image" src="heading.jpg" width="150" height="150"></h2>

  <input type="text" placeholder="Type A NOM NOM Dish.." class="inputBox" />
  <button class="inputBtn">Search</button>
</div>

So basically, it gets cropped out of the container. i don't understand why. I tried floating too, but it did not work.

You can replace your code with this. And it should work. I have included two css classes header-titles & header-image

<div class="seacrh">
    <h2 class="header-titles"> Meal app by Garvit </h2>
    <img class="header-image" src = "heading.jpg" width="150" height="150">
    <input type="text" placeholder="Type A NOM NOM Dish.." class="inputBox"/>
    <button class="inputBtn">Search</button>
</div>

And here are those two css classes.

.header-titles{
  width:50%;
  text-align: left;
  float: left;
}
.header-image{
  float: left;
}