Cannot inline buttons inside 3 divs with the same classes

Question

I have 3 divs with same classes like this:

<main>
        <div class="item">
            <img src="images/StormTrooper.png" alt="" />
            <h3>Return of the Jedi</h3>
            <p>E P I S O D E 6</p>
            <button type="button" name="button">Watch Now</button>
        </div>
        <div class="item">
            <img src="images/R2D2.png" alt="" />
            <h3>The Force Awakens</h3>
            <p>E P I S O D E 7</p>
            <button type="button" name="button">Watch Now</button>
        </div>
        <div class="item">
            <img src="images/Falkon.png" alt="" />
            <h3>The Last Jedi</h3>
            <p>E P I S O D E 8</p>
            <button type="button" name="button">Watch Now</button>
        </div>
    </main>

So the current output is :

The problem is that the elements inside the divs aren't ordered inline and dunno why. Here's my CSS:

@import "https://fonts.googleapis.com/css?family=Lato";
* {
    margin: 0;
    padding: 0
}

main {
    font-family: Lato, sans-serif;
    background: #729fcf;
    padding: 20px;
    display: flex;
    justify-content: center;

}

.item {
    background: #f0ebff;
    width: 300px;
    height: 350px;
    margin: 20px;
    text-align: center;
    padding: 20px;
    box-sizing: border-box; float: left;

}

.item img {
    width: 100px;
    display: inline;
}

.item h3 {
    text-transform: uppercase;
    margin: 15px 0;
}

.item p {
    margin: 35px 0;
    font-size: 12px;
}

.item button {
    background: 0;
    padding: 10px;
    border: 3px solid #6076cc;
    border-radius: 10px;
    font-size: 12px;
    margin-top: 35px;
}

  [1]: https://i.sstatic.net/2QxOA.jpg

Long story short, the expected output is the following picture: A little help would be appreciated.

Answer 1

You have to specify the height of .item img and .item h3 as image could be of different height and text could be of different length.

@import "https://fonts.googleapis.com/css?family=Lato";
* {
    margin: 0;
    padding: 0
}

main {
    font-family: Lato, sans-serif;
    background: #729fcf;
    padding: 20px;
    display: flex;
    justify-content: center;

}

.item {
    background: #f0ebff;
    width: 300px;
    height: 350px;
    margin: 20px;
    text-align: center;
    padding: 20px;
    box-sizing: border-box; float: left;

}

.item img {
    width: 100px;
    height:50px;
    display: inline;
}

.item h3 {
    text-transform: uppercase;
    margin: 15px 0;
    height:50px;
}

.item p {
    margin: 35px 0;
    font-size: 12px;
}

.item button {
    background: 0;
    padding: 10px;
    border: 3px solid #6076cc;
    border-radius: 10px;
    font-size: 12px;
    margin-top: 35px;
}

  [1]: https://i.sstatic.net/2QxOA.jpg

<main>
        <div class="item">
            <img src="images/StormTrooper.png" alt="" />
            <h3>Return of the Jedi</h3>
            <p>E P I S O D E 6</p>
            <button type="button" name="button">Watch Now</button>
        </div>
        <div class="item">
            <img src="images/R2D2.png" alt="" />
            <h3>The Force Awakens</h3>
            <p>E P I S O D E 7</p>
            <button type="button" name="button">Watch Now</button>
        </div>
        <div class="item">
            <img src="images/Falkon.png" alt="" />
            <h3>The Last Jedi</h3>
            <p>E P I S O D E 8</p>
            <button type="button" name="button">Watch Now</button>
        </div>
    </main>