How to Make Divs Inline with h3 and Form Elements

Question

I'm having trouble making elements inside a div display inline. I want each h3 element to be above its corresponding form, and then have the next h3 and form beside them in the same row. Here is the relevant HTML and CSS I am working with:

<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>

This doesn't achieve the inline layout I'm aiming for. How can I modify my CSS so that each h3 is above its corresponding form, and these pairs are displayed inline next to each other?

Answer 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>