I want some elements to be in one line, here's my html code:

```css
h2 {
  color: Red;
  font-size: 30px;
  font-weight: bold;
  display: inline-block;
}

img {
  display: inline-block;
}

h2.class1 {
  color: green;
  font-size: 20px;
  display: inline-block;
}

h2.class2 {
  color: yellow;
  font-size: 14px;
  display: inline-block;
}

.bg {
  background-color: black;
}
```

```html
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet">

</html>

<!-- Code -->
<div class="bg">
  <div class="container-sm center" style="margin-top: 25px;">
    <div class="d-grid gap-2 col-6 mx-auto">
      <img src="https://via.placeholder.com/50" width="50px" height="50px" style="border-radius:25px;">
      <h2 style="font-size: 25px;">Some Heading Text</h2>
      <h2 class="class1">{}></h2>
      <h2 class="class2"> Some Tagline Like Text</h2>
      <hr>
    </div>
  </div>
</div>
```

Here's what is the resulting output:
[![output](https://i.stack.imgur.com/QWgFb.png)](https://i.stack.imgur.com/QWgFb.png).

Also, Here's how i want it to look like (this is after removing bootstrap):
[![expected output](https://i.stack.imgur.com/UmOeK.png)](https://i.stack.imgur.com/UmOeK.png)

Edit: Things I tried:-

* d-inline-block
* inline-block
* float property
* experimenting with margins
* Some Bootstrap Classes(sorry i forgot which)
* Code Blocks I got from stackoverflow