'How can I make these divs inline?

I cant seem to make the elements inside this div inline. Id like the h3 to be above the form then the next h3 and form beside that.

<div class="title">

  <h3><b>Click To Encounter A Pokemon</b></h3>
  <form method="post" action="/encounter">
    <button style="background-color: Transparent;" onclick="catchPokemon()">
                            <img type="image" src="https://i.imgur.com/zs02wMs.png" alt="Catch Pokemon" width="100"
                                height="100">
                        </button>
  </form>

  <h3><b>Click To Catch Pokemon</b></h3>
  <form method="post" action="/encounter">
    <button style="background-color: Transparent;" onclick="catchPokemon()">
                            <img type="image" src="https://i.imgur.com/zs02wMs.png" alt="Catch Pokemon" width="100"
                                height="100">
                        </button>
  </form>

</div>

Solution 1:^[1]

You could add a container flexbox that acts as 'row' then within that the forms which are themselves also flexboxes, but 'columns'.

* {
    margin: 0;
    padding: 0;
}
button {
    line-height: 0;
    border: 1px solid black;
}
.row {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-evenly;
    align-items: flex-start;
}
.column {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}

<div class="row">

    <form class="column" method="post" action="/encounter">
        <h3>Click To Encounter A Pokemon</h3>
        <button onclick="catchPokemon()">
            <img type="image" src="https://picsum.photos/100?v=1">
        </button>
    </form>
    
    <form class="column" method="post" action="/encounter">
        <h3>Click To Catch Pokemon</h3>
        <button onclick="catchPokemon()">
            <img type="image" src="https://picsum.photos/100?v=2">
        </button>
    </form>
    
</div>

Solution 2:^[2]

<div class="title" style="display: flex; justify-content: space-between">
  <div>
    <h3><b>Click To Encounter A Pokemon</b></h3>
    <form method="post" action="/encounter">
      <button style="background-color: Transparent;" onclick="catchPokemon()">
           <img type="image" src="https://i.imgur.com/zs02wMs.png" alt="Catch Pokemon" width="100" height="100">
      </button>
    </form>
  </div>
  <div>
    <h3><b>Click To Catch Pokemon</b></h3>
    <form method="post" action="/encounter">
      <button style="background-color: Transparent;" onclick="catchPokemon()">
         <img type="image" src="https://i.imgur.com/zs02wMs.png" alt="Catch Pokemon" width="100" height="100">
      </button>
    </form>
  </div>
</div>

Here is a solution if you really don't want to add external styling (a css file linked to your html file). You can add div containers around the content you want aligned, and then, use display: flex; to the .title div, as shown above. Using display: inline; on the new div containers could also work, but you probably will need to adjust the margin to your liking.

Solution 3:^[3]

If you want to display those div's in line you can use css styles. Most Popular is just typing float: left; but I prefer to use flexbox. It's less complicated.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

But in this example you can use Float Left/Float right:

enter image description here

You have to add this to your css code. If you don't want to use styles from another file you can add it in <style> tag.

For example:

enter image description here

You put this in the <head> tag.

It should look like that. If you wanted this:

enter image description here

You don't need to put image in form when you wanna make a hyperlink. Use an <a> tag.

enter link description here

Good luck in programming :)